Space Out and Align (LI) Links In sticky NavBar - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav Bar

Description

Space Out and Align (LI) Links In sticky NavBar

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">
@charset "utf-8";

body {<!--from   www .j  a  v  a2s  .  c  o m-->
   margin:0;
   background-color:Chartreuse;
   font-family:'Titillium Web', Arial, sans-serif;
}

ul.topnav {
   display:flex;
   justify-content:space-around;
}

ul.topnav {
   margin:0;
   padding:6px;
   background-color:yellow;
   list-style-type:none;
   width:100%;
   position:fixed;
   top:0;
}

ul.topnav li {
   margin:0;
   padding:0;
}

ul.topnav a {
   margin:16px;
   padding:0;
   color:blue;
   overflow:hidden;
   display:inline-block;
   text-align:center;
   text-decoration:none;
   font-size:11px;
   font-weight:401;
   letter-spacing:4px;
   text-transform:uppercase;
}

ul.topnav li a:hover {
   color:pink;
   transition:0.4s;
}

ul.topnav li a.active {
   color:OrangeRed;
}

.navspace {
   height:56px;
}

@media screen and (max-width: 800px)  {
   ul.topnav {
      display:inherit;
      position:static;
   }
   
   ul.topnav a {
      display:block;
   }
   
   .navspace {
      height:0;
   }

}
</style> 
 </head> 
 <body> 
  <nav> 
   <ul class="topnav"> 
    <li> <a href="#">Lorem ipsu</a> </li> 
    <li> <a href="#">Lore</a> <a href="#">Lorem ip</a> <a href="#">Lorem</a> <a href="#">Lor</a> </li> 
    <li> <a href="#">Lorem</a> <a href="#">Lorem ip</a> </li> 
   </ul> 
  </nav> 
  <div class="navspace"></div> 
  <p>Lorem ipsum do</p> 
  <p>Lorem ipsum do</p> 
  <p>Lorem ipsum do</p> 
  <p>Lorem ipsum do</p> 
  <p>Lorem ipsum do</p> 
  <p>Lorem ipsum do</p> 
  <p>Lorem ipsum do</p> 
  <p>Lorem ipsum do</p> 
  <p>Lorem ipsum do</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p> 
  <p>Lorem ipsum dol</p>  
 </body>
</html>

Related Tutorials