У меня на сайте gotlib.me не применяется медиа-запрос. В инструментах разработчика в разделе Sources можно видеть скачанный файл Assets/style_layout.css Там внизу медиа-запросы
@media screen and (max-width: 768px){
.main{
box-sizing:border-box;
width:100%;
margin: 0;
border-radius: 0;
padding:20px;
}
nav{
width:240px;
display:inline-block;
}
header{
display: none;
}
header form{
display:none;
}
.cookie_accept{
width:100%;
padding:15px;
}
.mobile-menu{
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 30px;
transition: .5s;
opacity: 1;
background: #FFFFFF;
z-index: 2;
padding: 0 10px 10px 10px;
border-radius: 5px;
opacity: 1;
transition: .5s;
text-align: center;
box-shadow: 10px 0px 25px 0 #000;
}
.menu-hidden{
opacity: 0;
position: fixed;
top:-100%;
transition: .5s;
}
.mobile-menu .langs{
border-bottom: 1px solid #000000;
margin: 0 0 10px 0;
width: 33%;
display: inline-block;
text-align: center;
}
.mobile-menu nav{
border-bottom: 1px solid #000000;
margin: 0 0 10px 0;
width: 33%;
display: inline-block;
text-align: center;
}
.mobile-menu .langs a {
box-sizing: content-box;
text-align: center;
padding: 5px 5px;
text-decoration: none;
}
.mobile-menu nav a {
box-sizing: content-box;
text-align: center;
padding: 5px 5px;
text-decoration: none;
}
}
@media screen and (min-width: 769px) {
.mobile-menu {
opacity: 0;
position: fixed;
top: 0px;
right: -100px;
transition: .5s;
}
.menu-icon {
display: none;
}
.icon-stripe:after,
.icon-stripe:before {
display: none;
}
}
Они должны прятать шапку на брейкпоинте меньше 768px
<meta name="viewport" content="width=device-width, initial-scale=1">
тоже стоит
Простой
