Make menu bar fixed on top when scrolling - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Bar

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

Description

Make menu bar fixed on top when scrolling

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">
body {<!--  w  w w.  j a v  a2  s  .c  o  m-->
   height:1201px;
}

#header .inner #topmenu {
   float:right;
   width:51%;
   height:31px;
   background-color:Chartreuse;
}

#header .inner #topmenu .hidden {
   display:none;
}

#header .inner #topmenu .login {
   text-decoration:none;
   float:right;
   background:url('https://www.java3s.com/style/demo/Google-Chrome.png') no-repeat 41px 13px;
   padding-right:21px;
   padding-top:6px;
   color:yellow;
}

#header .inner .icons {
   float:left;
   postion:fixed;
   width:51%;
   height:31px;
   background-color:blue;
}

#header .inner .icons .twitter span {
   display:none;
}

#header .inner .icons .twitter {
   width:21px;
   height:21px;
   display:inline-block;
   background:url('https://www.java3s.com/style/demo/Google-Chrome.png') no-repeat center center;
   padding-top:11px;
   padding-left:11px;
}

#header .inner .icons .linkedin span {
   display:none;
}

#header .inner .icons .linkedin {
   width:21px;
   height:21px;
   display:inline-block;
   background:url('https://www.java3s.com/style/demo/Google-Chrome.png') no-repeat center center;
   padding-top:11px;
   padding-left:11px;
}

#header .inner .icons .fb span {
   display:none;
}

#header .inner .icons .fb {
   width:21px;
   height:21px;
   display:inline-block;
   background:url('https://www.java3s.com/style/demo/Google-Chrome.png') no-repeat center center;
   padding-top:11px;
   padding-left:11px;
}

#header .inner {
   width:100%;
   position:fixed;
   top:0px;
}
</style> 
 </head> 
 <body> 
  <div id="body"> 
   <header id="header"> 
    <div class="inner"> 
     <div id="topmenu"> 
      <a href="#" class="login">Lorem</a> 
     </div> 
     <div id="social" class="icons"> 
      <a href="http://twitter.com/" class="twitter"> <span>Lorem i</span> </a> 
      <a href="http://www.facebook.com/" class="fb"> <span>Lorem ip</span> </a> 
      <a href="http://www.linkedin.com/" class="linkedin"> <span>Lorem ips</span> </a> 
     </div> 
    </div> 
   </header> 
  </div>  
 </body>
</html>

Related Tutorials