CSS Flex - Top Navbar

Easily customizable code for both top navigation and side bar navigation.

This is one of the most easiest way to style a top navbar and keep it sticky if thats what you want.

HTML

Lets first come up with a html that is neat and has a good heirarchy.

 
  <div class="wrapper">
    <div class="menu vertical">
      <nav>
        <ul>
          <li><i data-feather="home"></i><a href=""> Home </a></li>
          <li><i data-feather="pie-chart"></i><a href=""> Analysis </a></li>
          <li class="has_menu"><i data-feather="box"></i><a href=""> Our Products </a><i data-feather="chevron-down"></i>
            <div class="sec_menu pushdown">
              <ul>
          <li><i data-feather="book"></i><a href=""> Code Library </a></li>
          <li><i data-feather="aperture"></i><a href=""> Palette Generator </a></li>
                 <li><i data-feather="edit"></i><a href=""> Image Editor </a></li>
                 <li><i data-feather="file"></i><a href=""> PDF Ready </a></li>
              </ul>
            </div>
          </li>
          <li><i data-feather="user"></i><a href=""> Clients </a>
          </li>
          <li><i data-feather="message-square"></i><a href=""> Contact </a></li>
        </ul>
      </nav>
    </div>
  </div>
 

Here I've use icons from Feather icons for making the menu look neat and simple.

CSS

Then comes the styling and the easy part as well.

Flex offers us simple properties that could easily wide layouts with ease.

.menu{
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
ul{
  display:flex;
  align-items:stretch;
  margin:0;
}
li{
  list-style:none;
  display:flex;
  gap:10px;
  position:relative;
  height: 40px;
  align-items: center;
  padding:5px  20px;
}
a{
  text-decoration:none;
  color:lightslategray;
  line-height:1.5;
}
li svg{
  width:20px;
  stroke:lightslategray;
}
li:hover{
  background:#efefef;
}
li:hover>*{
  color: #333;
  stroke:#333;
}
.sec_menu{
  display:none;
  position:absolute;
  top:50px;
  background:#fff;
  padding:0px;
  left:0;
  right:0;
}
.sec_menu ul{
  padding:0;
}
.has_menu:hover .sec_menu{
  display:block;
}
.pushdown ul{
  flex-direction:column;
}

This will put items into place like magnet. There are no floating objects or use of absolute position.

On addition to that to make it responsive and quickly switch the UI of a top navbar to a side navbar without any query, all you need to do is add a couple of lines of media query and there you have a side bar.

@media screen and (max-width:768px){
  body{
    background:#333;
  }
  .wrapper{
    display:flex;
    align-items:stretch;
    height:100vh;
  }
  .menu{
    padding:50px 0;
    width:240px;
  }
  .menu ul{
    padding:0;
    flex-direction:column;
  }
  .has_menu .sec_menu{
    left:240px;
    right:-240px;
    top:0;
  }
  .arrow{
    transform:rotateZ(-90deg);
  }
}

Check this example out for yourself.

Flex CSS Navbar

Dropdown menu animation

Let's add some transition effect to the