How To Code: Floating Navigation
The navigation of a website is obviously important. It’s how users will roam around the website and find the information that you want them to find. Navigation needs to be easily accessible and simple to use. Since navigation is so important, it can become difficult to get creative with it. There are a handful of navigation design techniques, one of them is the floating navigation bar.
The floating navigation bar is one that “floats” above the content of the website. Typically it stays fastened to the top of the page, but it is always there as the user scrolls down. This differs from a static navigation, where the navigation section is at the top of the website and scrolls away when the user scrolls down.
Why would you want to have a floating navigation bar? Sometimes it’s simply a nice design aspect and that’s the only reason. Other times, if your page has a lot of content, it’s nice to not have to scroll all of the way back up to the top of the page to navigate the site.
There are many tags that are used for nav items, but I’ve found the most straight-forward way is just wrapping them in a <span> tag. For CSS purposes, if you have other <span> tags inside your nav, you’ll want to give your navigation items a class name as well. If they are the only ones there, a class name is optional.
Also consider putting your website title and/or logo on the floating nav as a way to keep that visible to the users at all times.
At this point, in addition to your content, your HTML should contain something like this:
Which results in just this so far:
Next we move onto the CSS.
The “nav” <div> needs a width (typically 100% unless you’re up to something funky), a height, and a background color. You may consider adding a level of transparency, but remember that you still want your users to easily use the navigation bar. Additionally, the “nav” needs to be in a fixed position at the top of the screen, with a z-index higher than anything else you have on your page (minus any modals you want to be on top) - for most websites this number can remain fairly low. The z-index is the order in which your fixed and absolute positioned layers will float on top of each other, with a higher number being “closer” to you. A shadow will give you navigation more of a “floating” feel - this is completely a design choice and can be omitted if you’d like.
Due to the properties of a fixed element, the content that follows the navigation in your code will be pulled up to the top of the screen. This will cause a portion of your content to fall behind the navigation when scrolled all of the way up. To fix this, simply add a top margin to this content equal to the height of your navigation.
box-shadow: 2px 2px 20px #171717;
/* A few other irrelevant design items... */
This brings us here:
Format the navigation items to fit the feel of your website. Give them color, adjust the font, background, border, etc - whatever you’d like. Remember that a <span> is an inline object - and it should remain that way. You may also want to include transitions to make the hovering effects happen smoothly.
Aside from the “normal” format for the <span> items, you’ll probably want to also include the pseudo class “:hover” as well. This will make each object change its formatting ever so slightly when the cursor hovers over it. Common adjustments are adding underlines, changing font color or opacity, and changing the cursor appearance.
border: solid 1px #cccccc;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
border: solid 1px #171717;
**if you have a class name on your spans, you can simply use that in your css
window.location = page;
Then you add the “onclick” method to each <span> item, passing in the page as the parameter in each.
<span onclick="clickMenu('about.html')">About Us</span>
There you have it, a floating navigation bar! As you can see below, the bar stays at the top when you scroll down the page.