A fixed navigation bar is a beacon; it is always there for the wandering web user. The horizontal or vertical bar is always visible, even as a visitor scrolls down the page. This can help with conversion rate optimisation efforts because it will be easier for users to simply navigate where they want from wherever they are. While they are not a fix-all or appropriate for every site, they can be very useful in the right circumstances. How do you create a fixed navigation bar?
1. Create a directory with both a CSS file and an HTML file.
2. In the HTML file, add the basic HTML document structure. For HTML, that is:
<HTML>
<HEAD>
<TITLE>My new webpage</TITLE>
</HEAD>
<BODY>
(Webpage content between the <BODY> tags)
</BODY>
</HTML>
For HTML 5, it is:
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<meta charset=”utf-8″ />
<meta content=”key, words” />
<meta content=”description” />
<link rel=”stylesheet” href=”stylesheet.css” />
<link rel=”alternate” title=”Website Feed” href=”rss.php” />
<link rel=”icon” href=”favicon.ico” />
<title>Page Title</title>
</head>
3. Make sure the HTML file links to the CSS file.
4. Now, switch over to the CSS file. Add the code for the fixed navigation bar (this example comes from FuelYourCreativity.com):
#navigation {
position: fixed; top: 0; width: 100%; color: #ffffff; height: 35px; text-align: center; padding-top: 15px; /* Adds shadow to the bottom of the bar */ -webkit-box-shadow: 0px 0px 8px 0px #000000; -moz-box-shadow: 0px 0px 8px 0px #000000; box-shadow: 0px 0px 8px 0px #000000; /* Adds the transparent background */ background-color: rgba(1, 1, 1, 0.8); color: rgba(1, 1, 1, 0.8); } #navigation a { font-size: 14px; padding-left: 15px; padding-right: 15px; color: white; text-decoration: none; } #navigation a:hover { color: grey;
Now, this is just an example, and you can change the properties to suit your website. The first three lines indicate that the navigation bar will be fixed at the top and will span the entire width of the screen. Next, we have features like the color, font, alignment, etc. These you can play with to achieve the look and exact functionality you want.
5. Switch back to the HTML file and add:
<head>
<link rel=”stylesheet” href=”main.css” type=”text/css” />
<title>Static Navigation</title>
</head>
<body>
<div id=“navigation”>
<a href=”#”>Home</a>
<a href=”#”>Portfolio</a>
<a href=”#”>Our Apps</a>
<a href=”#”>Support</a>
<a href=”#”>Press</a>
<a href=”#”>About</a>
</div>
</body>
Note: “#” will be the URLs to the pages you’re linking to (so substitute # for the About URL, for instance).
6. Take a break and get some coffee!
7. Open the HTML file in your browser. If there is automatic padding, go back to the CSS file and add this code to the top to correct it:
body {
padding: 0; margin: 0; } 8. Now you should be good to go with your fixed nav bar!
(
(
Like us on Facebook
Follow us on Twitter
Connect on LinkedIn
