Здравствуйте, у меня есть меню навигации для мобильного и одно для обычного экрана компьютера. А когда ширина окна уменьшается, он избавляется от меню рабочего стола и вместо этого показывает мобильное меню. Это работает на chrome, когда я уменьшаю окно, но когда я смотрю на свой сайт с телефона, меню не отображается. У меня есть <meta name="viewport" content="width=device-width, initial-scale=1.0"> в теге <head>.
Код указан ниже.
<div class="mobilemenu">
<a href="#">link 1</a>
<a href="#">link 2</a>
</div>
<div class="desktopmenu">
<a href="#">link 1</a>
<a href="#">link 2</a>
</div>
И это css
.desktopmenu {
display: block;
}
.mobilemenu {
display: none;
}
@media screen and (max-width: 450px){
.desktopmenu {
display: none;
}
.mobilemenu {
margin-top: -46px !important; /* this is because of the wordpress header */
top: 0;
display: block;
overflow: hidden;
background-color: #333;
position: relative;
border-bottom: 1px solid darkgray;
}
}