How To Code: Floating Navigation | Amanda Elizabeth Design
Facebook Instagram Pinterest
Almost signed up! Just check your email to confirm!
Want all of the tips, tricks and tidbits Amanda Elizabeth Design has to offer? Make sure you sign up for our email list!


How To Code: Floating Navigation

by Amanda | December 4, 2017

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.

This post will discuss the general creation of a navigation bar, as well as show you how to make it float above the rest of your content. To do this, I work with HTML, CSS and Javascript.

Begin with your HTML. You’ll want to start out with a encapsulating “nav” <div>. This IS the part that will do the floating. From there, you’ll want to add your actual navigation items. These are the “home”, “services”, “about us” or whatever parts of your website you want general users to navigate to. Don’t put things that belong solely in your footer inside your navigation. Pages like your privacy policy, job/career pages, etc, most of the time belong in your footer and not your navigation. Keep the nav to the pages that a typical user would visit.

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:

<div id="nav">
    <span>Home</span>
    <span>About Us</span>
    <span>Blog</span>
    <span>Contact</span>
</div>

Which results in just this so far:

HTML Code

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.

#nav{
    width: 100%;
    height: 100px;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    box-shadow: 2px 2px 20px #171717;
}

#content{
    margin-top: 100px;
    /* A few other irrelevant design items... */
}

This brings us here:

CSS of 'nav' <div>

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.

#nav>span{
    text-transform: uppercase;
    color: #171717;
    font-family: sans-serif;

    line-height: 100px;

    margin-left: 100px;
    margin-right: 100px;

    padding: 10px;

    border: solid 1px #cccccc;

    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
}

#nav>span:hover{
    cursor: pointer;
    background-color: #171717;
    color: white;
    border: solid 1px #171717;
}

**if you have a class name on your spans, you can simply use that in your css

CSS of <span>s

The final step is adjusting your HTML so that your navigation items actual link to other sections of the website when clicked upon. You can do this either by using HTML’s <a> tag or by using Javascript’s “onclick” function. To avoid additional CSS, I tend to go with the Javascript method. To do so, you simply create a Javascript function for page redirects:

function clickMenu(page){
    window.location = page;
}

Then you add the “onclick” method to each <span> item, passing in the page as the parameter in each.

<div id="nav">
    <span onclick="clickMenu('home.html')">Home</span>
    <span onclick="clickMenu('about.html')">About Us</span>
    <span onclick="clickMenu('blog.html')">Blog</span>
    <span onclick="clickMenu('contact.html')">Contact</span>
</div>

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.

Scrolling Pt1 Scrolling Pt2 Scrolling Pt3