Mobile-friendliness 101: How to build a fixed navigation bar

Fixed navigation bars, or “sticky” navbars, are a very common design pattern. They allow the visitor to access the main site features very quickly since they are always visible, wherever the user is on the site or page. On the other hand, some would argue that they can take up too much space unnecessarily on already space-challenged mobile screens. But we’re not here today to discuss the right or wrong of it—you can read about the pros and cons of fixed navbars elsewhere. If you’re reading this, you’ve probably already decided that you want it, so let’s see how to do it!

What exactly are we trying to achieve?

We simply want a navigation bar that is always visible, stuck to either the top or the bottom of the viewport.

HTML for fixed navigation bar

For our fixed navbar, the HTML is pretty simple:

We could also use a <div> or other block element, but we might as well use the HTML5 semantically appropriate element!

CSS

Next we need a little CSS:

This gives us a very basic fixed navigation bar. The position:fixed CSS rule is doing the real work. This allows the navbar element to remain fixed on the screen, even during scrolling.

The top and left rules define where the navbar will be positioned, in this case 0 pixels from the top of the viewport, and 0 pixels from the left, and the width set to 100% of its container.

But there are a number of problems with this simple fixed navbar. First, it looks pretty awful! We’ll come back to this. Another problem becomes apparent when we view it on mobile: it looks tiny.

Let’s deal with the issue on mobile first. If we use the viewport meta tag, with width=device-width we can tell the page to display at the screen width, so it will adapt to different devices. Using initial-scale=1 means that the page will be displayed at a scale of 1:1, without any zooming. This will solve the tininess issue. Read more about the viewport meta tag here.

Now, the size looks ok.

Typically we would want to include a set of navigation links. We could use <ul> and <li> tags for the navigation items:

Since we are using li elements for our menu items, and these default to a vertical listing, we need to add a bit of styling to display them horizontally:

That gets us to here:

Now let’s try to improve the overall look of it. We’ll set a height for the navbar, and improve the look of the nav item links:

We’ll also update the fixed-nav rules to include a drop shadow and some padding:

Since the navbar itself has a height of 50px, we need to make sure that it does not obscure the main content. So we’ll add a margin to the main content that matches the height of the navbar:

And we can remove the unnecessary padding on the ul list:

Finally, it’s common to include a logo in the navbar. We just include the logo image in the HTML…

… and we apply an appropriate vertical alignment:

Much better! However, while this is fine for wide viewports, on narrow viewports such as mobile phone screens, there might not be enough space for a horizontal set of navigation links.

In this case, we’ll need to collapse the list at a certain breakpoint, to create what is essentially a responsive menu. Since we want to keep this article focused just on a fixed navigation bar, we’ll cover the responsive hamburger menu in a separate article.

Bottom fixed navigation bars

To create a fixed bottom navbar, we just need to make a minor change to anchor the navbar to the bottom of the page rather than the top, and add a margin to the bottom of the main content:

Note that we also need to adjust the drop shadow:

It’s less common to include a logo in a fixed bottom navbar, so you might want to remove that.

Showing and hiding the navbar on scroll

Earlier we mentioned that one of the criticisms of this approach was that the navbar will always take up valuable screen space all the time. Maybe there’s something we can do about this!

A common pattern you might have seen when browsing the web, is a variation on the fixed nav theme. The navigation bar is hidden as the user scrolls down the page. However, it is then shown again if the user scrolls upwards. Some would argue that this represents the best of both worlds, having a fixed navigation bar available when it’s needed, but hidden when it’s not. This is sometimes known as a pit navigation bar (from pit-stop: it’s there when you need it).

The approach is as follows:

• Show the navigation bar initially. We’ll just use the fixed navbar code from earlier for this.
• When the user scrolls down, hide the navbar
• When the user scrolls up again, show the navbar

A simple approach to achieve this is to attach a handler to the scroll event. In the handler we check ow much we scrolled and in which direction, and then decide to show or hide the navbar. (Note that it can be a bad idea to attach handlers to the scroll event unless you are doing very simple computations in the handler).

The example will use plain JavaScript. It should be easy to adapt for a library such as jQuery if you are already using it.

So, first we find the navbar element and define some variables that we will use later:

Then we attach the handler, and work out how much was scrolled, and where that would leave the navbar:

And now we check if we have scrolled to top, or if we have scrolled up, or down. Based on this, we work out where the top of the navbar should be: is it fixed to the top, sliding out, or sliding in?

And finally, we just save the last scroll position so we can work out what way the user scrolled, and by how much, when the next scroll event comes in:

And that’s it!

The full code listing for completed fixed top navbar is given below:

And that’s it! In future articles we’ll look at some other navigation design patterns, such as responsive hamburger menus, and animated side navigation menus.