В коде есть блок с классом .menu
:
Весь блок нужно скрыть в мобильной версии, я пишу запрос такого вида:
.menu {
background-color: #000;
padding-top: 20px;
width: 60px;
height: 100vh;
text-align: center;
box-sizing: border-box;
float: left;
position: fixed;
}
@media screen and (max-width: 960px) {
.menu {
display: none;
}
}
<div class="menu" id="menu">
<span class="logo" id="logo-color">AK</span>
<nav>
<a href="#home" class="menu__button"><img src="img/home.png" alt="home" class="menu__icon" title="Home Screen"></a>
<a href="#work" class="menu__button"><img src="img/works.png" alt="works" class="menu__icon" title="Works"></a>
<a href="#contacts" class="menu__button"><img src="img/contacts.png" alt="Contacts" class="menu__icon" title="Contacts"></a>
</nav>
</div>
Этот запрос не срабатывает, я пробовал изменить порядок основного стиля и медиа запроса, пробовал прописывать правила screen и no screen. Что я делаю не так и какие есть способы решения данной сложности?
float
иposition:fixed
не работают вместе. – E_K 9 янв в 23:51