htmlcssmpmediaquery

Splitting a row of tabs in the Navigation Bar at the top of the website into 2 rows

I am a coding noob here so I really appreciate any help that I can get here. So I am coding a website and I have a navigation bar at the top of my website. This is the code.

<!-- Main Body -->
  <body id= "home">
      <!-- Header -->
      <header class="first-page">
        <div id="navbar" class="navbar-top">
          <nav>
            <ul>
              <li><a href="#about">About</a></li>
              <li><a href="#education">Education</a></li>
              <li><a href="#qualifications">Qualifications</a></li>
              <li><a href="#experience">Experience</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </nav>
        </div>

Here is the CSS.

#navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333;
  color: #fff;
  opacity: 0.8;
  width: 100%;
  height: 70px;
  position: fixed;
  top: 0px;
  padding: 0 30px;
  transition: 0.5s;
  z-index: 2;
}

#navbar a {
  color: #fff;
  padding: 10px 20px;
  margin: 0 5px;
}

#navbar a:hover {
  border-bottom: #28a745 2px solid;
}

#navbar ul {
  display: flex;
}

When I try to do up the Media Query, I cannot seem to split this row of navigation bar into two separate rows. If it remains as one row, it will be too congested when browsing on phone. Hence, I would like to split this row into two for the navigation bar.

Can anyone please help me? Thank you. :)

Solution

  • add

    flex-wrap: wrap;

    to the flexbox container, eg. '#navbar ul'