Put background in a sticky navigation bar - HTML CSS CSS Property

HTML CSS examples for CSS Property:background

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background

Description

Put background in a sticky navigation bar

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <style>

body{<!-- ww w  .j  a va 2s  .  c om-->
   background:#ccc
}
#title {
   float: left;
   vertical-align: middle;
   padding-top: 13px;
   margin-top: 0px;
   left: 0px;
   padding-left: 136px;
   font-size: 25px;
}
#header_img{
   border: none;
   margin: 0 auto;
   display: block;
   z-index: -10;
   position: relative;
   top: 19px;
}
#header {
   width: 100%;
   height: 150px;
   padding-bottom:20px;
   background-color:#fff;
   z-index: 3;
   color:white;
   position: fixed;
   top: 0;
   left: 0;
}
#nav_bar {
   height: 56.088px;
   width: 88%;
   background-color: #629B5D;
   z-index: 2;
   margin: 60px auto 0 auto;
   border-bottom-right-radius: 5px;
   border-top-right-radius: 5px;
}
#nav_img {
   z-index: 3;
   position: fixed;
   top: 15px;
   left: 37px;
}
#nav_words {
   display: inline;
   padding-top: 0px;
   float: right;
   padding-left: 0px;
   padding-right: 0px;
   margin-right: 0px;
   margin-left: 0px;
   vertical-align: middle;
   margin-top: 15px;
}
#nav_words a {
   text-decoration:none;
}
.items {
   display: inline;
   padding-top:5px;
   vertical-align: middle;
   margin-right: 25px;
   font-family: 'Carrois Gothic', sans-serif;
   list-style-type:none;
}
#nav_words a {
   color: #FFF;
   background-color: #629B5D;
   font-size:18px;
}
#menu_item :hover {
   color: #D4D4D4;
   opacity: 75%;
}
.container{
   margin-top:150px
}

      </style> 
 </head> 
 <body> 
  <div id="header"> 
   <img id="nav_img" src="https://www.java2s.com/style/demo/Safari.png" height="122" width="201" alt="Lanier Canoe and Kayak Club logo"> 
   <div id="nav_bar" style:"color:#fff;"> 
    <header id="title">
      Lanier Canoe and Kayak Club 
    </header> 
    <ul id="nav_words"> 
     <a href="#" id="menu_item"> <li class="selected items">Home</li> </a> 
     <a href="#" id="menu_item"> <li class="items">About Us</li> </a> 
     <a href="#" id="menu_item"> <li class="items">Programs</li> </a> 
     <a href="#" id="menu_item"> <li class="items">Rentals</li> </a> 
     <a href="#" id="menu_item"> <li class="items">Contact Us</li> </a> 
    </ul> 
   </div> 
  </div> 
  <div class="container"> 
   <p align="center"> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> More text <br> <br> <br> <br> <br> 
   <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> More text <br> <br> <br> <br> <br> 
   <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> More text <br> <br> <br> <br> <br> 
   <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> More text <br> <br> <br> <br> <br> 
   <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> More text <br> <br> <br> <br> <br> 
   <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> More text <br> <br> <br> <br> <br> 
   <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> More text <br> <br> <br> <br> <br> 
   <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> More text <br> <br> <br> <br> <br> 
   <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> More text <br> <br> <br> <br> <br> 
   <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> More text <br> <br> <br> <br> <br> 
   <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> More text <br> <br> <br> <br> <br> 
   <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> More text <br> <br> <br> <br> <br> 
   <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> More text <br> <br> <br> <br> <br> 
   
   </p> 
  </div>  
 </body>
</html>

Related Tutorials