0

Хочу сделать меню - гамбургер в мобильной версии. Но чтобы видно было только в мобильной версии. А в полноэкранном режиме обычное меню. У меня видно и в моб.версии и в полноэкранном режиме, display: none не работает. Что можно сделать?

Есть html код:

    <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

Вот media.sass:

 @media (max-width: 480px)
  .top-nav
    &_btn
      display: block
1
  • В коносоле display: none зачеркнут
    – dmd7
    19 фев 2018 в 21:14

2 ответа 2

1

Либо у вас опечатка в пробелах, либо вы смотрите на ширине меньше 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>

Воспроизводимый пример на codepen & sass

2
  • я смотрю 320х568. И с пробелами норм
    – dmd7
    19 фев 2018 в 20:32
  • Ну вы же видите, что это ваш код и он работает? Если ширина 320, то ваш медиа кнопку показывает. Либо вы не все стили показываете. Сделайте пример воспроизводимым прямо вместе с sass на codepen например. Я его сделала внизу ответа по ссылке, посмотрите, может быть у вас не так, или вы не верно описали вашу задачу.
    – kizoso
    19 фев 2018 в 21:09
1

Вопрос решен. Просто перекрывался другим селектором

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.