Задать вопрос
@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;
}


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

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создать сервер VPS через wireguard
24 нояб. 2024, в 00:04
5000 руб./за проект
Добавить интеграцию оплаты Telegram Payments 2.0 в Mini App (React)
23 нояб. 2024, в 23:30
3000 руб./за проект
Нарисовать инфографику в 3-х вариантах
23 нояб. 2024, в 23:03
1 руб./за проект
Ещё заказы