@WowItIsYou2020

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

Мне нужно скрить меню навигации при экране меньше 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;
}


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

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

Войти через центр авторизации
Похожие вопросы