Nav bar items are justified - 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

Nav bar items are justified

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor</title> 
  <meta name="DESCRIPTION" content="Portfolio"> 
  <meta name="AUTHOR" content="Cameron"> 
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> 
  <style>
.header {<!--from www  . j a  v a  2s  .c om-->
   display:block;
   margin:0 auto;
   width:961px;
}

.headerleft {
   display:flex;
   justify-content:space-between;
   float:left;
   margin-top:151px;
   margin-bottom:51px;
   margin-left:51px;
   width:276px;
   font-family:"Nexa";
   font-size:12px;
   letter-spacing:3px;
   font-weight:701;
   color:Chartreuse;
}

@font-face {
   font-family:"NexaBlack";
   src:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   font-style:normal;
   font-weight:901;
}

.headerright {
   float:right;
   margin-top:151px;
   margin-right:51px;
   margin-bottom:61px;
   width:301px;
   text-align:right;
   font-family:"Nexa";
   font-size:32px;
   letter-spacing:7px;
   font-weight:901;
   color:yellow;
}

a {
   text-decoration:none;
   color:blue;
}

.link:hover {
   border-bottom:7px solid pink;
   padding-bottom:7px;
   color:OrangeRed;
}

#clicked {
   color:grey;
   border-bottom:7px solid BlueViolet;
   padding-bottom:7px;
   font-weight:701;
   cursor:default;
}
</style> 
 </head> 
 <body> 
  <div class="header"> 
   <p class="headerleft"> <a class="link" href="index.html">Lorem ip</a> <a id="clicked" href="javascript:void(0)">Lorem</a> <a class="link" href="contact.html">Lorem i</a> </p> 
   <p class="headerright"> <a class="logolink" href="index.html">Lorem</a> </p> 
  </div>  
 </body>
</html>

Related Tutorials