Search code examples
htmlcssflexboxmedia-queriesresponsive

CSS Flexbox: Navigation is not stacking (becoming one column)

I want my nagivation <li> items to be side by side to each other like it currently is. But I want them to be on top of each other (1 column) when the screen size is 545 pixels or smaller.

The navigation is NOT changing to 1 column when it reaches 545 pixels.

I have tried to add flex-direction: column to the @media(max-width: 545px) to 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>

I expected it to become one column at 545px and less. But it stays as one row instead.

Solution

  • You just forgot to close the nav ul li a:hover rule with a } before the media query (and then again at the end of the media query). If you add that, it works:

    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>