CSS Flexbox: навигация не складывается (становится одним столбцом) - PullRequest
Новая
       13

CSS Flexbox: навигация не складывается (становится одним столбцом)

0 голосов
/ 23 марта 2019

Я хочу, чтобы мои нагибы <li> предметов были рядом друг с другом, как это сейчас.Но я хочу, чтобы они находились друг над другом (1 столбец), когда размер экрана составляет 545 пикселей или меньше.

Навигация НЕ изменяется на 1 столбец, когда она достигает 545 пикселей.

Я пытался добавить flex-direction: column к @media(max-width: 545px) к nav ul

    nav {
  padding-left: 0px;
}

nav ul {
  display: flex;
}

nav ul li {
  list-style: none;
  margin-right: 50px;
}

nav ul li a {
  color: #8B8B8B;
  text-decoration: none;
  font-weight: bold;
  font-size: 17px;
  text-align: center;
}

nav ul li a:hover {
  color: #56B8AE;
  border-bottom: 1px solid;
  /* I WANT A ONE ROW STACK OF THE NAV ONCE THE SCREEN IS 545px or SMALLER */
  @media (max-width: 545px) {
    nav {
      padding-top: 0;
      padding-bottom: 30px;
      margin-top: 0;
      min-height: 100px;
      text-align: center;
    }
    nav ul {
      flex-direction: column;
    }
    nav ul li {
      border-top: solid 1px #e6ecf0;
      padding-bottom: 5px;
    }
<head>
  <link rel="stylesheet" href="style.css">
</head>
<header>
  <nav>
    <ul class="top-nav">
      <li class="top-nav-links"><a href="#"><i class="fas fa-home"></i> Home</a></li>
      <li class="top-nav-links"><a href="#"><i class="fas fa-store"></i> Shop</a></li>
      <li class="top-nav-links"><a href="#"><i class="fas fa-music"></i> Music</a></li>
    </ul>
  </nav>
  <header>

Я ожидал, что он станет одним столбцом с 545px и меньше.Но вместо этого он остается одним рядом.

Ответы [ 2 ]

1 голос
/ 23 марта 2019

Вы просто забыли закрыть правило nav ul li a:hover с помощью } перед медиа-запросом (а затем снова в конце медиа-запроса). Если вы добавите это, это работает: 

nav {
  padding-left: 0px;
}

nav ul {
  display: flex;
}

nav ul li {
  list-style: none;
  margin-right: 50px;
}

nav ul li a {
  color: #8B8B8B;
  text-decoration: none;
  font-weight: bold;
  font-size: 17px;
  text-align: center;
}

nav ul li a:hover {
  color: #56B8AE;
  border-bottom: 1px solid;
}


/* I WANT A ONE ROW STACK OF THE NAV ONCE THE SCREEN IS 545px or SMALLER */

@media (max-width: 545px) {
  nav {
    padding-top: 0;
    padding-bottom: 30px;
    margin-top: 0;
    min-height: 100px;
    text-align: center;
  }
  nav ul {
    flex-direction: column;
  }
  nav ul li {
    border-top: solid 1px #e6ecf0;
    padding-bottom: 5px;
  }
}
<head>
  <link rel="stylesheet" href="style.css">
</head>
<header>
  <nav>
    <ul class="top-nav">
      <li class="top-nav-links"><a href="#"><i class="fas fa-home"></i> Home</a></li>
      <li class="top-nav-links"><a href="#"><i class="fas fa-store"></i> Shop</a></li>
      <li class="top-nav-links"><a href="#"><i class="fas fa-music"></i> Music</a></li>
    </ul>
  </nav>
  <header>
0 голосов
/ 23 марта 2019

Просто добавьте flex-wrap: wrap; на контейнер. Примечание: не относится к вашему вопросу, но вы также должны переместить <header> внутрь <body>. 

    nav {
  padding-left: 0px;
}

nav ul {
  display: flex;
  flex-wrap:wrap;
}

nav ul li {
  list-style: none;
  margin-right: 50px;
}

nav ul li a {
  color: #8B8B8B;
  text-decoration: none;
  font-weight: bold;
  font-size: 17px;
  text-align: center;
}

nav ul li a:hover {
  color: #56B8AE;
  border-bottom: 1px solid;
  /* I WANT A ONE ROW STACK OF THE NAV ONCE THE SCREEN IS 545px or SMALLER */
  @media (max-width: 545px) {
    nav {
      padding-top: 0;
      padding-bottom: 30px;
      margin-top: 0;
      min-height: 100px;
      text-align: center;
    }
    nav ul {
      flex-direction: column;
    }
    nav ul li {
      border-top: solid 1px #e6ecf0;
      padding-bottom: 5px;
    }
<head>
  <link rel="stylesheet" href="style.css">
</head>
<header>
  <nav>
    <ul class="top-nav">
      <li class="top-nav-links"><a href="#"><i class="fas fa-home"></i> Home</a></li>
      <li class="top-nav-links"><a href="#"><i class="fas fa-store"></i> Shop</a></li>
      <li class="top-nav-links"><a href="#"><i class="fas fa-music"></i> Music</a></li>
    </ul>
  </nav>
  <header>
...