CSS Horizontal Navigation Bar
A horizontal navigation bar places its links side by side, and usually sits at the top of a webpage.
A <nav> element is often wrapped around the <ul> to serve as the bar's container.
Horizontal Navbar Using Float
Setting float on the <li> elements is one route to building a horizontal navigation bar.
Example
Prompt
Create a horizontal navigation bar using float on the li elements. The ul has no list-style, no margin/padding, overflow hidden, and a dark background (#333333). The li elements float left. Links are block, white, centered, 14px 16px padding, no underline. Hover changes background to #111111. Include Home, News, Contact, About links.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navbar with Float</title>
<style>
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;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Horizontal Navbar Using Flex
CSS flexbox offers a more modern route: just put display: flex on the <ul>.
Flex navbar
Prompt
Create a horizontal navigation bar using CSS flexbox (display: flex on ul). The ul has no list-style, no margin/padding, dark background (#333333). Links are block, white, 14px 16px padding, no underline. Hover changes background to #111111. Include Home, News, Contact, About links.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Navbar with Flex</title>
<style>
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;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Centered flex navbar
To move the navbar links to the center, add justify-content: center to the bar.
Prompt
Create a horizontally centered navigation bar using CSS flexbox. Same as the flex navbar but add justify-content: center to the ul to center the links.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Horizontal Navbar with Flex</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
justify-content: center;
}
ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Active State
Users can see which page they are on when its link is highlighted through an "active" class.
Example
Prompt
Create a horizontal navigation bar with an active state. Use the dark background horizontal navbar and add an "active" class to the Home link with background-color #04AA6D.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active State Horizontal Navbar</title>
<style>
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:not(.active) {
background-color: #111111;
}
ul li a.active {
background-color: #04AA6D;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Gray Horizontal Navbar
Here the bar is gray, with a thin gray border around it.
Example
Prompt
Create a gray horizontal navigation bar using flexbox. The ul has a light gray background (#f3f3f3), a 1px solid #e7e7e7 border, no list-style, no margin/padding. Links are dark text with padding. Include Home, News, Contact, About links.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gray Horizontal Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
ul li a {
display: block;
color: #666;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #dddddd;
}
ul li a.active {
color: white;
background-color: #04AA6D;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Right-align Last Link
Any link, or several, can sit on the right side of the bar: give its list item float: right.
Example
Prompt
Create a horizontal navigation bar where the last link (About) is right-aligned using float: right on that li element. The rest of the links are left-aligned. Use the dark background navbar style.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Right-align Last Link</title>
<style>
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:not(.active) {
background-color: #111111;
}
ul li a.active {
background-color: #04AA6D;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li style="float:right"><a href="#">About</a></li>
</ul>
</body>
</html>
Border Dividers
Dividers between links come from a border-right on each <li> element other than the last.
Example
Prompt
Create a horizontal navigation bar with border dividers between links. Add border-right: 1px solid #bbbbbb to all li elements except the last one (using li:last-child). Use the dark background navbar style with float.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Dividers</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
ul li {
float: left;
border-right: 1px solid #bbbbbb;
}
ul li:last-child {
border-right: none;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Fixed Navigation Bar
To pin the navigation bar to the top or bottom of the page, combine the position property with top or bottom.
Fixed Top
Prompt
Create a horizontal navigation bar fixed to the top of the page using position: fixed, top: 0, and width: 100%. Add enough body content to demonstrate scrolling while the navbar stays fixed. Add margin-top to the body content so it's not hidden behind the navbar.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Top Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
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: #111;
}
body {
margin-top: 50px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<h2>Fixed Top Navigation Bar</h2>
<p>Scroll down this page to see the fixed navbar stays at the top.</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
</body>
</html>
Fixed Bottom
Prompt
Create a horizontal navigation bar fixed to the bottom of the page using position: fixed, bottom: 0, and width: 100%. Add enough body content to demonstrate scrolling while the navbar stays at the bottom.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Bottom Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
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: #111;
}
</style>
</head>
<body>
<h2>Fixed Bottom Navigation Bar</h2>
<p>Scroll down this page to see the fixed navbar stays at the bottom.</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
Sticky Navigation Bar
A sticky navbar needs position: sticky on the <ul>. Depending on the scroll position, such an element switches between relative and fixed positioning.
Note: Sticky positioning only works once at least one of top, right, bottom, or left is specified.
Example
Prompt
Create a sticky horizontal navigation bar using position: sticky and top: 0. Add content before and after the navbar to demonstrate that it becomes fixed when scrolling past it.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
top: 0;
}
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: #111;
}
</style>
</head>
<body>
<h1>Sticky Navigation Bar</h1>
<p>The navbar will stick to the top when you reach its scroll position.</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<h2>Scroll Down</h2>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet.</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
<p>Some text.. Some text.. Some text.. Some text..</p>
</body>
</html>
Dropdown Menu in Navigation Bar
Hovering over a menu item can reveal a dropdown menu placed inside the navigation bar.
Example
Prompt
Create a horizontal navigation bar with a dropdown menu. One of the menu items ("Dropdown") reveals a dropdown list of links on hover. Use a div inside the li for the dropdown content, hidden by default and shown on hover with position: absolute.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Menu in Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
background-color: #333;
}
ul li {
float: left;
}
ul li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
Responsive Navbar
With CSS media queries, a responsive top navigation can switch from horizontal to vertical when the screen gets smaller.
Example
Prompt
Create a responsive horizontal navigation bar that collapses to vertical on small screens using CSS media queries. On wide screens the links display horizontally; on narrow screens they stack vertically.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Top Navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111;
}
ul li a.active {
background-color: #04AA6D;
}
@media screen and (min-width: 600px) {
ul li {
float: left;
}
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<h2>Responsive Navbar</h2>
<p>Resize the browser window to see the navbar change from horizontal to vertical.</p>
</body>
</html>