CSS Navbar with items left aligned and right aligned - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav Bar Item

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Nav Bar Item

Description

CSS Navbar with items left aligned and right aligned

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
@import url(https://www.java2s.com/style/demo/Safari.png);
nav {<!-- w  w w .ja  va  2  s.c  o  m-->
   display:block;
   width:100%;
}

.navbar {
   background:Chartreuse;
   width:100%;
}

.navbar-fixed-top {}
.navbar ul {
   list-style:none;
   margin:0;
   padding:0;
   line-height:2;
   display:block;
   zoom:2;
}

.navbar ul:after {
   content:" ";
   display:block;
   font-size:0;
   height:0;
   clear:both;
   visibility:hidden;
}

.navbar ul li {
   display:inline;
   padding:0;
   margin:0;
}

.navbar ul li a {
   color:yellow;
   text-decoration:none;
   display:block;
   padding:16px 26px;
   font-family:'Open Sans', sans-serif;
   font-weight:701;
   text-transform:uppercase;
   font-size:15px;
   position:relative;
   -webkit-transition:color .26s;
   -moz-transition:color .26s;
   -ms-transition:color .26s;
   -o-transition:color .26s;
   transition:color .26s;
}

.navbar ul li a:hover {
   color:blue;
}

.navbar ul li a:hover:before {
   width:100%;
}

.navbar ul li a:after {
   content:"";
   display:block;
   position:absolute;
   right:-4px;
   top:20px;
   height:7px;
   width:7px;
   background:pink;
   opacity:.6;
}

.navbar ul li a:before {
   content:"";
   display:block;
   position:absolute;
   left:0;
   bottom:0;
   height:4px;
   width:0;
   background:OrangeRed;
   -webkit-transition:width .26s;
   -moz-transition:width .26s;
   -ms-transition:width .26s;
   -o-transition:width .26s;
   transition:width .26s;
}

.navbar-left {
   float:left;
}

.navbar-right {
   float:right;
}

@media screen and (max-width: 768px)  {
   .navbar ul li {
      float:none;
      display:block;
   }
   
   .navbar ul li a {
      width:100%;
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
      box-sizing:border-box;
      border-bottom:2px solid grey;
   }
   
   .navbar ul li.last>a,
      .navbar ul li:last-child>a {
      border:0;
   }
   
   .navbar ul li a:after {
      display:none;
   }
   
   .navbar ul li a:before {
      display:none;
   }

}
</style> 
 </head> 
 <body>
   Lorem ipsum dolor s 
  <div class="navbar"> 
   <ul> 
    <li class="navbar-left"> <a href="#">Lo</a> </li> 
    <li class="navbar-left"> <a href="#">Lor</a> </li> 
    <li class="navbar-left"> <a href="#">Lor</a> </li> 
    <div class="navbar-right"> 
     <li class="navbar-left"> <a href="#">Lor</a> </li> 
     <li class="navbar-left"> <a href="#">Lorem</a> </li> 
    </div> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials