Задать вопрос
@WowItIsYou2020
html

Как спрятать панель навигации и получить желанный результат?

Мне нужно скрить меню навигации при экране меньше 480.

При 480 у меня сейчас header выглядит так: 5f8b734216bfc720051913.png

Мне нужен такой результат: 5f8b737b4f3fe946577541.png

display: none и visability:hidden почему то не скрывают блок nav. 

<!DOCTYPE html>
<html lang="eu">

<head>
    <meta charset="utf-8">
    <title>Forkio</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/style.min.css">
</head>

<body>

    <header class="header">
        
        <div class="header_container container">
            <div class="header_logo flex">
                    <img src="images/dest/header/logo_header.png" alt="">
                    <p>FORKIO</p>
            </div>
           
            <div class="header_button flex">
                <p>Buy Now</p>
            </div>
            
            <div class="flex">
                <div class="header_nav">
                    <div class="nav flex">
                        <div class="nav_item">
                            <a href="#">Overview</a>
                        </div>
                        <div class="nav_item">
                            <a href="#">About Fork</a>
                        </div>
                        <div class="nav_item">
                            <a href="#">Buying Options</a>
                        </div>
                        <div class="nav_item">
                            <a href="#">Support</a>
                        </div>
                    </div>
                </div>
            </div>

            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                <img src="images/dest/header/burger-menu-icon.png" alt="">
            </a>
        </div>
    </header>


<script src="js/app.min.js"></script>

</body>
</html>


.header 
{
    background-color: #27262a;
    color: #8d81ac;

    &_container 
    {
        height: 100px;
        display: flex;
        justify-content: space-between; //Равномерно распределяет все элементы по ширине flex-блока.
    }

    &_logo 
    {
        font-family: MyriadPro-Regular;
        font-size: 24px;
        font-weight: 400;
        height: 100%;
    
        img 
        {
            display: block;
            margin-right: 16px;
        }
    }

    &_button 
    {
      padding: 0 35px;
      height: 38px;
      width: 75px;
      border-radius: 19px;
      background-color: #8d81ac;
      font-weight: bold;
      border: 2px solid;
      justify-content: center;
      text-align: center;
      border: none;
      color: #ffffff;
      order: 2;
      align-items: center;
      margin-top: 30px;
      p 
      {
        font-family: Montserrat-Bold;
        font-size: 16px;
        white-space: nowrap;
      }

      &:hover 
      {
        width: 71px;
        color: #8d81ac;
        background-color: #fff;
        border: 2px solid #8d81ac;
       
      }
    }
}

.nav 
{
    &_item 
    {
        font-family: Montserrat-Bold;
        font-size: 16px;
        font-weight: 700;
        margin-right: 45px;
        font-style: normal;

        a 
        {
            text-decoration: none;
            color: inherit;
            &:hover {
            color: #ffffff;
            }
        }
    }
}

@media screen and (max-width: 992px){
    .container {
      width: 768px;
      flex-wrap: wrap;
      height: 119px;
      overflow: hidden;
    }
    .header_button {
      order: 0;
    }
    .header_nav {
      width: 100%;
    }
    

    .header_logo 
    {
      margin-top: -20px;
    }

    .header_button 
    {
      margin-top: 20px;
    }

    .nav 
    {
      justify-content: center;
      margin-left: 120px;
      margin-top: -35px;
    }

  }

  .icon 
  {
    float: right;
    order: 3;
    margin-top: 36px;
    visibility: hidden;
    display: block;
  }

  @media screen and (max-width: 480px) 
  {
      .nav
      {
        display: none;
      }
  }
  
  .flex 
{
    display: flex;
    align-items: center; /* Центрировать элементы в поперечной оси */
}

.container 
{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    justify-content: space-between;
    display: flex;
}


По возможности дайте совет по выпадающему меню)
  • Вопрос задан
  • 456 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
@chelnokov_a
Скорее всего что-то я приоритетами напутано. Использую display: none !important;
Хотя это не верное решение. Могу подсказать более точно если проинспектирую код. Можешь верстку выложить на хостинг?
Ответ написан
12 комментариев
12 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Доработать дизайн лендинга
25 апр. 2024, в 09:29
2500 руб./за проект
Сделать красивый лендинг в Тильде
25 апр. 2024, в 09:27
4000 руб./за проект
Создание видео. Моушен дизайн
25 апр. 2024, в 09:20
10000 руб./за проект
Ещё заказы