Stick menu bar to the top - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Bar

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu Bar

Description

Stick menu bar to the top

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

a {<!--from w ww .  java2  s.c  om-->
   color: #646c84;
   font-weight: 500;
   line-height: 1.7vw;
   transition: all 0.2s;
}
a:hover {
   color: #ffaf54;
   cursor: pointer;
   transform: scale(1.2);
   text-decoration: none;
}
a:focus {
   color: #646c84;
   text-decoration: none;
}
a:focus:hover {
   color: #ffaf54;
   cursor: pointer;
}
.active-indicator {
   background: #ffaf54;
   border-radius: 25px;
   height: 2px;
   margin-top: -2px;
   margin-bottom: 5px;
   margin-left: auto;
   margin-right: auto;
   opacity: 0;
   transition: all 0.2s;
   width: 25px;
}
.active-indicator.active {
   opacity: 1;
}
#menu {
   background: whitesmoke;
   border: 1px solid rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   position: fixed;
   left: -1;
   right: -1;
   top: 0;
   transition: all 0.2s;
   z-index: 1;
}
#menu a {
   font-size: 0.9vw;
}
#menu.inactive {
   opacity: 0;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div id="menu"> 
   <div id="landing-nav"> 
    <a>Home</a> 
    <div class="active-indicator active"></div> 
   </div> 
   <div id="about-nav"> 
    <a>About</a> 
    <div class="active-indicator"></div> 
   </div> 
   <div id="portfolio-nav"> 
    <a>Portfolio</a> 
    <div class="active-indicator"></div> 
   </div> 
   <div id="resume-nav"> 
    <a>Resume</a> 
    <div class="active-indicator"></div> 
   </div> 
   <div id="contact-nav"> 
    <a>Contact</a> 
    <div class="active-indicator"></div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials