Make list of inline nav items the full height of the container - 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

Make list of inline nav items the full height of the container

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">
#top-nav-container {
   font-size:15px;
   width:100%;
   height:51px;
   overflow:hidden;
   top:0;
   left:0;
   position:fixed;
   z-index:501;<!-- w ww  . jav a  2 s .  c o  m-->
   background:Chartreuse;
}

#top-nav-container .nav-contents {
   height:100%;
   display:flex;
   flex-direction:row;
   flex-wrap:wrap;
   align-items:center;
}

#top-nav-container .nav-left {
   width:176px;
}

#top-nav-container .nav-mid {
}
#top-nav-container .nav-right {
   margin-left:auto;
   text-align:right;
   width:51px;
}

#top-nav-container .top-nav-logo {
   max-height:36px;
   float:left;
}

#top-nav-container ul {
   margin:0 0 0 31px;
   padding:0;
   float:left;
   list-style:none;
   display:flex;
   flex-direction:row;
   align-items:center;
}

#top-nav-container ul li {
}
#top-nav-container li a {
   text-decoration:none;
   background:red;
   border-right:2px solid yellow;
   color:blue;
   padding:0 13px;
   height:51px;
   line-height:51px;
   display:inline-block;
}
</style> 
 </head> 
 <body> 
  <header id="top-nav-container"> 
   <div class="container nav-contents"> 
    <div class="nav-left"> 
     <a href="#" title="Home"> <img src="https://www.java2s.com/style/demo/Opera.png" alt="Home" class="top-nav-logo"> </a> 
    </div> 
    <div class="nav-mid"> 
     <ul> 
      <li> <a href="#">Lore</a> </li> 
      <li> <a href="#">Lorem</a> </li> 
      <li> <a href="#">Lorem i</a> </li> 
     </ul> 
    </div> 
    <div class="nav-right">
      Lorem ipsum dol 
    </div> 
   </div> 
  </header>  
 </body>
</html>

Related Tutorials