При добавлении медиазапроса панель навигации не отображается - PullRequest
Новая
       2

При добавлении медиазапроса панель навигации не отображается

0 голосов
/ 16 января 2020

Надеюсь, что кто-то может помочь мне здесь. Я изначально проектировал веб-страницу для настольного компьютера. теперь я пытаюсь изящно - ухудшить и добавить функции для небольших экранов.

Что происходит сейчас, так это то, что навигационная панель вообще не отображается. заголовок - это гибкий контейнер, в котором есть 2 вложенных гибких контейнера. Предполагается, что справа будет отображаться изображение, если экран не опускается ниже 376 пикселей.

Я не уверен, почему ... 

.nav-container {
  flex-direction: column;
  display: flex;
  width: 100vw;
  max-width: 100%;
  height: auto;
  background-color: #0092FF;
}

header {
  display: flex;
  width: 100%;
  height: 80px;
  flex-direction: row;
  flex-shrink: 0;
  top: 0px;
}

header nav .logo {
  float: left;
  margin-left: 6.25em;
  margin-top: 22px;
  width: 215px;
  height: 40px;
}

header nav .menu .menu-item {
  display: none;
  /* position: absolute;
  z-index: 100;
 */
}

@media screen and (min-width:23.5em) {
  header nav .menu {
    display: inline-block;
    display: flex;
    margin-right: 6.25em;
    margin-top: 0;
    justify-content: flex-end;
  }
  header nav .menu .menu-item .nav-link {
    flex-direction: row;
    padding-right: 60px;
    display: inline-block;
    margin-top: 31px;
    font-size: 1.125em;
    font: Semibold 18px/22px Proxima Nova;
    align-items: center;
    letter-spacing: 0;
    color: #FFFFFF;
    opacity: 1;
    text-decoration: none;
    outline: none;
  }
  header nav .menu-item .login {
    display: inline-block;
    width: 104px;
    height: 40px;
    background-color: Transparent;
    color: white;
    border: 2px solid #fff;
    border-radius: 40px;
    text-align: center;
    outline: none;
    vertical-align: middle;
    text-decoration: none;
    font-size: 1.125em;
    margin-top: 22px;
  }
}
<div>
  <header class="nav-container">
    <nav>
      <div class="logo"><img src="./images/overpass.svg" alt="overpass"></div>
      <ul class="menu">
        <li class="menu-item"><a href="" class="nav-link">Features</a></li>
        <li class="menu-item"><a href="" class="nav-link">Pricing</a></li>
        <li class="menu-item"><button type="button" class="login">Login</button></li>
      </ul>
    </nav>
  </header>
</div>

Ответы [ 2 ]

1 голос
/ 17 января 2020

Чтобы отобразить панель навигации, вам нужно добавить это в ваш медиа-запрос: 

header nav .menu .menu-item {
  display: block;
}

Для более подробного объяснения:

  • header nav .menu .menu-item .nav-link = каждый элемент с nav-link класс в заголовке> nav> .menu> .menu-item
  • header nav .menu-item .login = каждый элемент с логин класс в заголовке> nav> .menu-item
  • header nav .menu .menu-item = каждый элемент с пунктом меню класс в заголовке> nav> .menu
  • Итак, если вы установите display: none; для .menu-item, то вы необходимо установить display: block; (или другое) для того же элемента , а не nav-link или логин класс
0 голосов
/ 17 января 2020

Я применил предложение сверху. это работает сейчас: 

.nav-container {
  flex-direction: column;
  display: flex;
  width: 100vw;
  max-width: 100%;
  height: auto;
  background-color: #0092FF;
}

header {
  display: flex;
  width: 100%;
  height: 80px;
  flex-direction: row;
  flex-shrink: 0;
  top: 0px;
}

header nav .logo {
  float: left;
  margin-left: 6.25em;
  margin-top: 22px;
  width: 215px;
  height: 40px;
}
header nav .menu .menu-item {
  display: none;
  /* position: absolute;
  z-index: 100;
 */
}

@media screen and (min-width:23.5em) {
    header nav .menu {
      display: inline-block;
      display: flex;
      margin-right: 6.25em;
      margin-top: 0;
      justify-content: flex-end;
    }

    header nav .menu .menu-item {
      display: inline-block;
      flex-direction: row;
      margin-top: 1.94em;
    }

      header nav .menu .menu-item .nav-link{
      padding-right: 60px;
      font-size:  1.125em;
      font: Semibold 18px/22px Proxima Nova;
      align-items: center;
      letter-spacing: 0;
      color: #FFFFFF;
      opacity: 1;
      text-decoration: none;
      outline: none;
    }

    header nav  .menu-item .login {
      display: inline-block;
      width: 104px;
      height: 40px;
      background-color: Transparent;
      color: white;
      border: 2px solid #fff;
      border-radius: 40px;
      text-align: center;
      outline: none;
      vertical-align: middle;
      text-decoration: none;
      font-size:  1.125em;
      margin-top: -0.5em;
    }

  }
...