Search code examples
htmlcssnavbarresponsivenav

Responsive Navbar with CSS

I am trying to make my navbar responsive at 500px width using media queries without using the hamburger sign. I want to make the "menu" div that houses the links to be broken into a new line directly under the one with the "company-name" when the screen is reduced to anything under 500px. Anyone out here that can help?

#nav-bar {
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
  background-color: #38b000;
  color: #FFFFFF
}

.company-name {
  font-size: 32px;
  flex: 1;
}

.menu {
  display: flex;
  justify-content: space-evenly;
  flex: 1;
  max-width: 20%;
  font-size: 18px;
  align-items: center;
}
<nav id="nav-bar">
  <h2 class="company-name" title="Return to Home Page"><a class="company-link" href="">URL Saver</a></h2>
  <div class="menu">
    <a href="" class="nav-link" href="/">Login</a>
    <a href="" class="nav-link" href="/">Logout</a>
    <a href="" class="nav-link" href="/">Profile</a>
  </div>
</nav>

Solution

  • The simple solution was just to input flex-direction: column; at the specific width. Then just a little CSS manipulation to make it all nice.