Make a top navigation header sticky - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

Make a top navigation header sticky

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Luke Rebeiro</title> 
  <style>

.site-header {<!--   w  w  w.  ja v a  2 s.co  m-->
   display: flex;
   justify-content: space-between;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   background-color: #999;
   height: 80px;
   overflow: visible;
   z-index: 50;
}
.site-header__nav {
   position: relative;
   cursor: pointer;
}
.site-header__nav:hover ul {
   max-height: 100vh;
   visibility: visible;
}
.site-header__nav-menu {
   max-height: 0;
   visibility: hidden;
   transition: all 0.5s ease;
}
.site-header__nav-menu li:hover {
   background-color: #aaa;
}
body {
   margin-top: 100px;
}
.site-content {
   height: 150vh;
}


      </style> 
 </head> 
 <body translate="no"> 
  <header class="site-header"> 
   <div class="site-header__logo"> 
    <p>Logo here</p> 
    <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
   </div> 
   <nav class="site-header__nav-container"> 
    <ul class="site-header__nav"> 
     <li> Menu 
      <ul class="site-header__nav-menu"> 
       <li>Menu item 1</li> 
       <li>Menu item 2</li> 
       <li>Menu item 3</li> 
      </ul> </li> 
    </ul> 
   </nav> 
  </header> 
  <div class="site-content"> 
   <h1>Your site!</h1> 
   <p> Fixed header example... </p> 
  </div>  
 </body>
</html>

Related Tutorials