A “sticky” navigation bar, also known as a fixed navigation bar, is a toolbar that remains stationary during user scrolling. It is a prevalent website navigation design pattern, often used to display a site’s primary navigation menu, along with essential interface elements such as a search box, social media buttons, and notifications. This design ensures that critical interface components are easily visible and accessible, regardless of the user’s position on the webpage.
This tutorial will guide you through a straightforward CSS method for creating a top horizontal fixed navigation bar. To begin, let’s examine websites with fixed navigation bars to ensure we are on the same page and to showcase practical applications of the design pattern. Below are examples of actual websites with fixed navigation bars:
– Niice features a fixed navigation bar with a search box and the site’s navigation menu. As you browse design inspirations, you can quickly filter them using the search box at the top of your screen.
– 99U, an online publication, has a fixed navigation bar where the site’s navigation menu is located, allowing users easy access to the menu throughout their reading experience.
– Forbes.com employs a fixed navigation bar to provide access to its menu, search feature, and login widget anywhere in the reading experience. This feature helps users quickly navigate to another article after finishing the current one, potentially reducing bounce rates by continually offering a menu of other articles to read.
A fixed navigation bar is an effective way to minimize delays and interruptions caused by switching tasks, such as searching the site, logging in, or navigating to other site sections. This design pattern, in essence, enhances usability by applying Fitts’ Law.
After exploring real-world applications of the fixed navigation bar design pattern, I’ll now demonstrate a quick and easy implementation method using only HTML and CSS.
You can explore a demo page before proceeding. Here’s a screenshot of the fixed navigation bar demo page:
[View Demo](#) [Download Source from GitHub](#)
HTML:
The markup required is minimal, consisting of a block-level element to hold the fixed navigation bar’s content.
“`html
“`
For semantics and improved interoperability with third-party web services, such as search engine robots interested in understanding your website’s information architecture, the “ element is a suitable choice. The “ element is also a block-level element by default, which saves a line of CSS.
CSS:
Here’s the style rule that keeps the fixed navigation bar in place.
“`css
.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
background-color: #00a087;
}
“`
The last three properties (top, left, and right) are variable; change their values according to your needs. Let’s delve into the four key CSS properties responsible for the fixed navigation bar’s magic.
– `position: fixed;`: Positions the bar relative to the viewport, allowing it to stay put during document scrolling.
– `top: 0; left: 0; right: 0;`: Sets the top, left, and right properties to 0 to avoid unintended margins/padding at the top and sides of the fixed navigation bar. (Tip: To have a fixed bar at the bottom of the viewport, change `top` to `bottom`.)
– `z-index: 9999;`: An unusually high value ensures that the fixed navigation bar is not overlaid by other HTML elements, as long as there are no other elements with a higher `z-index`.
A fixed navigation bar is simple to implement, requiring minimal HTML markup and only a few CSS properties you’re already familiar with. This tutorial’s method is compatible with most browsers due to its reliance on established CSS practices. However, if backward compatibility is crucial for your projects, consider replacing the “ element with a “ element.
In the right context, a fixed navigation bar can enhance usability and UX by reducing the delay between switching tasks. It increases the affordance of UI components within the bar compared to traditional top horizontal navigation bars, which require scrolling back to the top of the webpage.
For further reading on website design and development, consider the following resources:
– Information Architecture 101: Techniques and Best Practices
– 5 CSS Effects Libraries for Supercharging Your Designs
– Lessons We Learned from Our Biggest UX and Design Mistakes
– 8 Ways to Add a Responsive Navigation Menu on Your Site