I want to make a menu - a hamburger in the mobile version. But that it was visible only in the mobile version. And in full-screen mode, the usual menu. I can see both in the mobile version and in full screen mode, display: none does not work. What can be done?

There is an html code:

<div class="col-xl-auto"> <button class="top-nav_btn"> <i class="icon-menu"></i> </button> <ul class="top-nav_menu"> <li><a href="#">Главная</a></li> <li><a href="#">О компании</a></li> <li><a href="#">наши услуги</a></li> <li><a href="#">Структура</a></li> <li><a href="#">инвесторам</a></li> <li><a href="#">контакты</a></li> </ul> </div>

Sass:

 .top-nav background-color: $white padding: 15px position: relative &_btn display: none width: 30px height: 30px background-color: transparent border: none font-size: 18px position: absolute right: 15px top: -50px

Here is media.sass:

  @media (max-width: 480px) .top-nav &_btn display: block
  • Displayed: none crossed out in conosole - dmd7

2 answers 2

Either you have a typo in the spaces, or you look at a width of less than 480:

 .top-nav { background-color: #fff; padding: 15px; position: relative; } .top-nav_btn { display: none; width: 30px; height: 30px; background-color: transparent; border: none; font-size: 18px; position: absolute; right: 15px; top: -50px; } @media (max-width: 480px) { .top-nav .top-nav_btn { display: block; } } 
 <div class="col-xl-auto"> <button class="top-nav_btn"> <i class="icon-menu"></i> </button> <ul class="top-nav_menu"> <li><a href="#">Главная</a></li> <li><a href="#">О компании</a></li> <li><a href="#">наши услуги</a></li> <li><a href="#">Структура</a></li> <li><a href="#">инвесторам</a></li> <li><a href="#">контакты</a></li> </ul> </div>

Reproducible example on codepen & sass

  • I watch 320x568. And with spaces of norms - dmd7
  • Well, you see that this is your code and it works? If the width is 320, then your media button shows. Or you do not show all the styles. Make the example playable right along with sass on the codepen for example. I made it at the bottom of the answer on the link, look, maybe you have not, or you have not correctly described your task. - kizoso

The issue is resolved. Just overlapped by another selector.