'display vertical navigation bar when resize screen

in this excercise, I have a navbar with logo in the left and list in the right. the list in right side use ul and li, where ul is set display: flex and justify-content: space-around. i expect to have list display vertical when screen get smaller, so i use a media query and set flex-direction column for ul. But it did not work, when screen gets smaller list still display horizontal

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100px;
  padding: 20px 0;
  border: 1px solid #000;
  position: fixed;
  top: 0;
  width: 100%;
}
.logo {
  width: 60vw;
  border: 1px solid red;
}
img {
  width: 100%;
  height: 100%;
  max-width: 300px;
}
nav {
  border: 1px solid #000;
}
li {
  list-style: none;
  border: 1px solid #000;
}
a {
  text-decoration: none;
  color: black;
  /* padding: 20px; */
  border: 1px solid #000;
}
ul {
  width: 35vw;
  display: flex;
  justify-content: space-around;
  border: 1px solid #000;
  /* flex-direction: column; */
}
@media only screen and (max-width: 600px) {
  ul {
    display: flex;
    flex-direction: column;
  }
}
<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
  integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
  crossorigin="anonymous"
/>
<link rel="stylesheet" href="/unsolve pro/solution/nav_test.css" />
<div id="page-wrapper">
  <header id="header">
    <div class="logo">
      <img
        id="header-img"
        src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
        alt="original trombones logo"
      />
    </div>

    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#features">Features</a></li>
        <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
        <li><a class="nav-link" href="#pricing">Pricing</a></li>
      </ul>
    </nav>
  </header>
</div>
htmlcssmedia-queriesnavbarresponsiveness


Solution 1:[1]

You need to apply flex-box property on both header and ul.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100px;
  padding: 20px 0;
  border: 1px solid #000;
  position: fixed;
  top: 0;
  width: 100%;
}
.logo {
  width: 60vw;
  border: 1px solid red;
}
img {
  width: 100%;
  height: 100%;
  max-width: 300px;
}
nav {
  border: 1px solid #000;
}
li {
  list-style: none;
  border: 1px solid #000;
}
a {
  text-decoration: none;
  color: black;
  /* padding: 20px; */
  border: 1px solid #000;
}
ul {
  width: 35vw;
  display: flex;
  justify-content: space-around;
  border: 1px solid #000;
  /* flex-direction: column; */
}
@media only screen and (max-width: 600px) {
  header {
    display: flex;
    flex-direction: column;
  }
  ul {
    display: flex;
    flex-direction: column;
}
}
<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
  integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
  crossorigin="anonymous"
/>
<link rel="stylesheet" href="/unsolve pro/solution/nav_test.css" />
<div id="page-wrapper">
  <header id="header">
    <div class="logo">
      <img
        id="header-img"
        src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
        alt="original trombones logo"
      />
    </div>

    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#features">Features</a></li>
        <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
        <li><a class="nav-link" href="#pricing">Pricing</a></li>
      </ul>
    </nav>
  </header>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yash porwal

Related Questions