CSS Horizontal Navigation Bar
In a horizontal navigation bar, the navigation links are stacked horizontally (next to each other), and is typically aligned on the top of a webpage.
The basics of a horizontal navigation bar is an unordered list (
- ), with list items (
- ), each holding a link (), as shown in the Navbar Intro page.
It is also common to add a
Horizontal Navbar Using Float
One way of creating a horizontal navigation bar is to add the
floatproperty to the- elements.
Here we create a basic horizontal navigation bar with a dark background color and change the background color of the links when the user moves the mouse over them:
- Home
- News
- Contact
- About
Example
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } ul li { float: left; } ul li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul li a:hover { background-color: #111111; }Example explained:
overflow: hidden;- Prevents list items from going outside of the listbackground-color: #333333;- Adds a black background-color to the- element
float: left;- Makes- elements float next to each other
display: block;- Allows us to specify padding, height, width, and margins topadding: 14px 16px;- Add some padding between each elementtext-decoration: none;- Removes underline from the links
Horizontal Navbar Using Flex
A more modern way of creating a horizontal navigation bar, is to use CSS flexbox.
The following example creates an equal-looking horizontal navbar as above, but with flexbox:
Example
ul { list-style-type: none; margin: 0; padding: 0; background-color: #333333; display: flex; } ul li a { display: block; color: white; padding: 14px 16px; text-decoration: none; } ul li a:hover { background-color: #111111; }The solution here are
display: flex;. This creates a flex context and by default the items are shown from left to right.And just by adding one line to the ul block:
justify-content: center;, you will have a horizontally centered navbar:Example
ul { list-style-type: none; margin: 0; padding: 0; background-color: #333333; display: flex; justify-content: center; }
Active State
Here, we add an "active" class to highlight the link corresponding to the current page to let the user know which page/section he/she is on:
- Home
- News
- Contact
- About
Example
ul li a.active { background-color: #04AA6D; }
Gray Horizontal Navbar
Here is an example of a gray horizontal navigation bar with a thin, gray border:
- Home
- News
- Contact
- About
Example
ul { list-style-type: none; margin: 0; padding: 0; display: flex; border: 1px solid #e7e7e7; background-color: #f3f3f3; }
Right-align Last Link
You can right-align one or more links by floating the list items to the right (
float: right;):- Home
- News
- Contact
- About
Example
<ul> <li><a href="#home" class="active">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li style="float:right"><a href="#about">About</a></li> </ul>
Border Dividers
Add the
border-rightproperty to- elements (to all
- s, except the last), to create link dividers:
- Home
- News
- Contact
- About
Example
/* Add a lightgray right border to all list items, except the last */ ul li { float: left; border-right: 1px solid #bbbbbb; } ul li:last-child { border-right: none; }
Fixed Navigation Bar
You can make the navigation bar to stay fixed at the top or at the bottom of a page, by using the
positionproperty along withtoporbottom:Fixed Top
ul { position: fixed; top: 0; width: 100%; }Fixed Bottom
ul { position: fixed; bottom: 0; width: 100%; }Note: Fixed position might not work properly on mobile devices.
Sticky Navigation Bar
Add
position: sticky;to- to create a sticky navbar.
An element with
position: sticky;toggles between arelativeandfixedposition, depending on the scroll position.A sticky element is positioned relative until a certain scroll position is reached - then it "sticks" in that place (like position: fixed).
Example
ul { position: sticky; top: 0; }Note: You must specify at least one of the
top,right,bottomorleftproperties, for sticky positioning to work.
Dropdown Menu in Navigation Bar
Here we create a dropdown menu for one of the menu links:
Example
Responsive Navbar
Example
<img alt="Responsive Navbar" src="navbar_responsive_hor.jpg" style="width:100%"/> - elements.
