openElement

Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic

   Hello fellow openElementers,
Here is an easy to implement script for adding a fixed navigation bar to your website.  This means that it will always stay fixed at the top of the screen even as you scroll down past other content.  It can also be tweaked to become a left or right side nav bar, or even a footer that's always on screen. This is an HTML/CSS technique... Other solutions involving javascript and/or jQuery are also available.  http://www.thecodepress.info/2013/01/fixed-navigation-bar-in-css-html.html

For a barebones version, enter this into a regular visible Codeblock. Change categories as necessary - you can even use icons if you want:

<div id="nav">
<ul id="navigation">
 <li><a href="#">Home</a></li>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Products</a></li>
 <li><a href="#">Downloads</a></li>
 <li><a href="#">About</a></li>
</ul>
</div>

Then, in a Hidden Codeblock, choose CSS as the script type and enter:

#nav
 {
 background-color:#262626;
 width:100%; /*this gives the navbar the entire width of its container*/
 height:50px; /*this is the height of the bar, for a sidebar change to 100pct and width to a specific value*/
 box-shadow: 0px 1px 50px #5E5E5E;
 position:fixed; /* this is the part that keeps the bar fixed to a point on the screen*/
 top:0px; /* this is the positioning of the bar, for a footer change to bottom*/
 left:0px;
 white-space:nowrap;
}

#navigation
{
 list-style-type:none; 
}
li 
{
 display:inline; /* this puts every LI in the UL in one line */
 padding:10px;
}

#nav a
{
 font-family:verdana;
 text-decoration:none;
 color:#EDEDED;
} 
#nav a:hover 
{
 color:#BDBDBD;
}
body
{
margin-top:80px; /* this is so that the navbar doesn't cover the topmost content of the page */
}

You can change styles, colors and behavior as you see fit.

openElement

Fixed Navigation Bar