The navigation was necessary for any website. Navigation could help the user access all of the menus. The CSS is used to make the boring HTML menu transform into a good-looking navigation bar. However, the UX is important to note, too.
In this tutorial, you'll learn about the CSS3 navigation bar. I'll show you how to make a simple navigation bar that is easy to learn by beginners. Let's Begin!
List of Links
The navigation bar is a list of links. You need to use a standard HTML as a base for the navigation bar before using the CSS. You can use <ul> and <li> elements to make your first simple navigation bar.
Example:
-HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 - Navigation Bars</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- navigation bar -->
<h2>My First Navigation Bar</h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="pagelink1.html">Page 1</a></li>
<li><a href="pagelink2.html">Page 2</a></li>
<li><a href="pagelink3.html">Page 3</a></li>
</ul>
</body>
</html>- CSS
ul {
list-style: none; /* remove the bullets */
margin: 0;
padding: 0;
}Result:
Vertical Navigation Bar
The vertical navigation bar is navigation that keeps its content aligned with the main page. This navigation type is usually placed on the side of the page and called a sidebar or side navigation bar. This navigation consumes more space on the page. However, you can also place it at the top of the page (usually on a device with a small screen size).
To make it, let's see the example below.
Example:
-HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 - Navigation Bars</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Vertical Navigation Bar Example</h2>
<ul class="vertical-nav">
<li><a href="index.html">Home</a></li>
<li><a href="pagelink1.html">Page 1</a></li>
<li><a href="pagelink2.html">Page 2</a></li>
<li><a href="pagelink3.html">Page 3</a></li>
</ul>
</body>
</html>- CSS
ul.vertical-nav {
list-style: none;
margin: 0;
padding: 0;
width: 250px;
background-color: #b4b4b4;
}
ul.vertical-nav>li a {
display: block; /* Displaying the links as block elements and make the whole link area clickable. */
color: #000; /* text color */
padding: 10px 15px;
text-decoration: none; /* removes the underline */
}
/* Color link on hover */
ul.vertical-nav>li a:hover {
background-color: #4733ff;
color: #fff;
}Result:
Center Links and Border
You can also add the border property to make a border around the navbar, or "text-align: center" to center the links.
Example:
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 - Navigation Bars</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h4>Center Links and Border</h4>
<ul class="vertical-nav-2">
<li><a href="index.html">Home</a></li>
<li><a href="pagelink1.html">Page 1</a></li>
<li><a href="pagelink2.html">Page 2</a></li>
<li><a href="pagelink3.html">Page 3</a></li>
</ul>
</body>
</html>- CSS
/* With border and center links */
ul.vertical-nav-2 {
list-style: none;
margin: 0;
padding: 0;
width: 250px;
border: 1px solid #000;
background-color: #b4b4b4;
}
/* center links & border */
ul.vertical-nav-2>li {
text-align: center;
border-bottom: 1px solid #000;
}
ul.vertical-nav-2>li:last-child {
border-bottom: none;
}
ul.vertical-nav-2>li a {
display: block; /* Displaying the links as block elements and make the whole link area clickable. */
color: #000; /* text color */
padding: 10px 15px;
text-decoration: none; /* removes the underline */
}
/* Color link on hover */
ul.vertical-nav-2>li a:hover {
background-color: #4733ff;
color: #fff;
}Result:
Current Navigation Links
You can add an "active" class to the current link to let the user know which page they're on.
Example:
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 - Navigation Bars</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h4>Current Navigation Link</h4>
<ul class="vertical-nav-3">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="pagelink1.html">Page 1</a></li>
<li><a href="pagelink2.html">Page 2</a></li>
<li><a href="pagelink3.html">Page 3</a></li>
</ul>
</body>
</html>- CSS
/* Current Navigation Link */
ul.vertical-nav-3 {
list-style: none;
margin: 0;
padding: 0;
width: 250px;
background-color: #b4b4b4;
}
ul.vertical-nav-3>li a {
display: block;
color: #000;
padding: 10px 15px;
text-decoration: none;
}
ul.vertical-nav-3>li a.active {
background-color: #4733ff;
color: #fff;
}
ul.vertical-nav-3>li a:hover {
background-color: #555;
color: #fff;
}Result:
Fixed and Full-Height Side Navigation Bar
As I said before, vertical navigation is also called a sidebar. Now, I'll show you how to make a sidebar/side nav with a fixed position and the full height of the page by using CSS3.
Example:
-HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 - Navigation Bars</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="vertical-nav-fixed">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="pagelink1.html">Page 1</a></li>
<li><a href="pagelink2.html">Page 2</a></li>
<li><a href="pagelink3.html">Page 3</a></li>
</ul>
<div class="content">
<h2>Fixed and Full Height Side Navigation Bar</h2>
<h4>Lorem ipsum dolor sit amet consectetur.</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, minus!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non eveniet voluptas consequuntur necessitatibus
quod cum eaque incidunt. Aut maiores voluptatibus, quae, tenetur, quas voluptatum nobis nemo iusto illum
quo ipsa.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat magnam nulla reiciendis!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, omnis laboriosam. Adipisci, minus
mollitia eligendi voluptatem accusantium voluptates atque esse perferendis labore quo reiciendis
inventore commodi recusandae totam veritatis repudiandae porro ab consequuntur! Voluptatum unde natus
necessitatibus voluptatem praesentium sequi dolore architecto est saepe dolorem eveniet quae odit fugiat
quos velit neque porro hic vero consectetur eligendi, perspiciatis quod sapiente? Obcaecati ipsam omnis
optio sit perspiciatis accusamus est reiciendis aliquam, laudantium rem consequatur aspernatur sequi
itaque velit pariatur animi, recusandae dicta cupiditate iure laborum, officiis et qui. Laudantium,
dolores asperiores repellendus dolor quasi expedita itaque tempora sunt! Quisquam, sapiente blanditiis.
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet debitis harum iure reiciendis molestias!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus tenetur fuga esse architecto dolore cum
quasi. Doloribus alias quia aperiam nam eius at incidunt maxime, itaque corporis eum ab dignissimos quas
voluptas, officiis error nostrum. Deleniti ipsum quam blanditiis cupiditate, quis unde repellendus ullam
laboriosam accusantium quae nisi non mollitia, incidunt fugit iste nihil reprehenderit reiciendis magni eius
quo corporis vero sunt suscipit? Laudantium necessitatibus, incidunt, ipsam, tempora quis fugit distinctio
dignissimos modi voluptas dolorum labore cupiditate molestiae! Modi ipsa fugit ea repellat aperiam aliquid,
accusantium, doloribus impedit nesciunt perspiciatis ratione amet sint cum ducimus voluptatum
exercitationem. Veritatis atque aspernatur id cumque earum labore et quibusdam dicta quasi sed esse sequi
similique commodi nemo, suscipit provident veniam eius praesentium, magni aut dolore vero, rerum dolores.
Eum ipsa eos laborum id exercitationem aperiam reprehenderit doloremque tempore aspernatur dolor, nam culpa
optio mollitia voluptatibus eligendi accusamus distinctio blanditiis consequuntur dolorem, reiciendis ad
asperiores unde quis amet. Accusantium cum voluptates earum dolores delectus autem debitis eos adipisci enim
a excepturi accusamus optio neque, odit voluptate repudiandae pariatur nobis ab quos, iste dicta totam?
Ducimus tempore doloremque libero vero nobis autem, nesciunt modi debitis adipisci rem officiis rerum
soluta. Odio pariatur earum suscipit tempore.</p>
</div>
</body>
</html>- CSS
div.content {
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
}
ul.vertical-nav-fixed {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #b4b4b4;
position: fixed;
height: 100%;
overflow: auto;
}
ul.vertical-nav-fixed>li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
ul.vertical-nav-fixed>li a.active {
background-color: #4733ff;
color: #fff;
}
/* Color link on hover */
ul.vertical-nav-fixed>li a:hover {
background-color: #555;
color: #fff;
}When you scroll, the side navigation will keep its position:
Horizontal Navigation Bar
By using CSS, you can also make a horizontal navigation bar. This navigation bar is placed at the top of each page and is also called as topbar or top nav. To make a horizontal navigation bar, you can use the inline or the floating list items.
Example (inline list items):
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 - Navigation Bars</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Horizontal Navigation Bar</h2>
<h4>Inline List Items</h4>
<ul class="horizontal-nav-inline">
<li><a href="index.html">Home</a></li>
<li><a href="pagelink1.html">Page 1</a></li>
<li><a href="pagelink2.html">Page 2</a></li>
<li><a href="pagelink3.html">Page 3</a></li>
</ul>
<h4>Float List Items</h4>
<ul class="horizontal-nav-float">
<li><a href="index.html">Home</a></li>
<li><a href="pagelink1.html">Page 1</a></li>
<li><a href="pagelink2.html">Page 2</a></li>
<li><a href="pagelink3.html">Page 3</a></li>
</ul>
<p>Be sure !DOCTYPE is specified. If not, floating items can produce unexpected results.</p>
</body>
</html>- CSS
/* Horizontal Nav Bar */
ul.horizontal-nav-inline {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.horizontal-nav-inline>li {
display: inline;
}
ul.horizontal-nav-float {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
ul.horizontal-nav-float>li {
float: left;
}
ul.horizontal-nav-float>li a {
display: block;
padding: 8px;
background-color: #b4b4b4;
}Result:
Here's another example of the horizontal navigation bar with a style change by using the CSS3:
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 - Navigation Bars</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h4>CSS3 Horizontal Navigation Bar</h4>
<ul class="horizontal-nav-css">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="pagelink1.html">Page 1</a></li>
<li><a href="pagelink2.html">Page 2</a></li>
<li><a href="pagelink3.html">Page 3</a></li>
</ul>
</body>
</html>- CSS
ul.horizontal-nav-css {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #b4b4b4;
}
ul.horizontal-nav-css>li {
float: left;
}
ul.horizontal-nav-css>li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.horizontal-nav-css>li a.active {
background-color: #4733ff;
color: #fff;
}
ul.horizontal-nav-css>li a:hover {
background-color: #555;
}Result:
Right-align items
The CSS3 allows you to add some items to the right or left floating horizontal navigation bar. The example below will explain to you how to add a right-aligned item.
Example:
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 - Navigation Bars</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h4>Right Align Items</h4>
<ul class="nav">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="pagelink1.html">Page 1</a></li>
<li><a href="pagelink2.html">Page 2</a></li>
<li style="float: right;"><a href="pagelink3.html">Page 3</a></li>
</ul>
</body>
</html>- CSS
/* Right Align Items */
ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #b4b4b4;
}
ul.nav>li {
float: left;
}
ul.nav>li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.nav>li a.active {
background-color: #4733ff;
color: #fff;
}
ul.nav>li a:hover {
background-color: #555;
}Result:
Fixed Horizontal Navigation
The same to the vertical navigation bar, CSS3 allows you to make the horizontal navigation bar have a fixed position at the top or bottom.
Example (Fixed Top):
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fixed Top Navbar</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
body {
margin: 0;
}
</style>
<body>
<ul class="topnav">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="pagelink1.html">Page 1</a></li>
<li><a href="pagelink2.html">Page 2</a></li>
<li><a href="pagelink3.html">Page 3</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores voluptatum voluptate impedit voluptates tenetur
alias nisi, inventore consequuntur libero vero dicta id maxime soluta ea aperiam deserunt doloribus
reprehenderit unde, consectetur dignissimos quidem tempore voluptas explicabo! Blanditiis assumenda ipsa alias
atque doloremque doloribus distinctio omnis iure eos facilis accusamus nisi est eum esse ad sunt quasi nihil
beatae reprehenderit, vero ab porro quidem pariatur iste? Est perferendis necessitatibus, voluptatum molestias
magni aliquam ullam? Veritatis facilis esse totam atque tenetur deleniti illum? Animi ut non praesentium
cupiditate, molestias nam rem amet saepe corporis ad maxime, commodi nemo et, incidunt ab. Eaque, harum. Nisi
iure, quia omnis culpa molestiae fuga fugit accusantium error tenetur velit ipsam ullam cupiditate a itaque
facilis vel exercitationem laudantium illo? Error eum fugiat ipsam dicta nostrum, consectetur iusto aperiam
similique sed illum aliquam quae temporibus necessitatibus rerum nulla magnam eligendi id pariatur repudiandae
earum, sit quod accusantium. Odio voluptatem dolor quaerat incidunt consectetur nisi tempore deleniti cumque
rerum ea. Quo asperiores officia molestiae totam eos fugit porro, dolorem, unde earum quam aut dicta, in numquam
temporibus soluta deserunt! Vero soluta molestias quia! Rem aperiam, tempore possimus quia perspiciatis
explicabo cupiditate error, assumenda, accusantium debitis harum aut nesciunt!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, necessitatibus adipisci!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, deleniti amet, consequuntur, voluptate ullam
placeat dolorem esse ducimus dolorum iusto voluptatem dolores aperiam delectus voluptatibus expedita ipsa fugit.
Dolorem, blanditiis!</p>
</div>
</body>
</html>- CSS
/* fixed top-nav */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #bebebe;
position: fixed;
top: 0;
width: 100%;
}
ul.topnav>li {
float: left;
}
ul.topnav>li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav>li a:hover:not(.active) {
background-color: #555;
color: #fff;
}
ul.topnav>li a.active {
background-color: #4733ff;
}(Fixed Bottom):
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fixed Bottom Navbar</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
body {
margin: 0;
}
</style>
<body>
<ul class="bottom-nav">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="pagelink1.html">Page 1</a></li>
<li><a href="pagelink2.html">Page 2</a></li>
<li><a href="pagelink3.html">Page 3</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores voluptatum voluptate impedit voluptates
tenetur
alias nisi, inventore consequuntur libero vero dicta id maxime soluta ea aperiam deserunt doloribus
reprehenderit unde, consectetur dignissimos quidem tempore voluptas explicabo! Blanditiis assumenda ipsa
alias
atque doloremque doloribus distinctio omnis iure eos facilis accusamus nisi est eum esse ad sunt quasi nihil
beatae reprehenderit, vero ab porro quidem pariatur iste? Est perferendis necessitatibus, voluptatum
molestias
magni aliquam ullam? Veritatis facilis esse totam atque tenetur deleniti illum? Animi ut non praesentium
cupiditate, molestias nam rem amet saepe corporis ad maxime, commodi nemo et, incidunt ab. Eaque, harum.
Nisi
iure, quia omnis culpa molestiae fuga fugit accusantium error tenetur velit ipsam ullam cupiditate a itaque
facilis vel exercitationem laudantium illo? Error eum fugiat ipsam dicta nostrum, consectetur iusto aperiam
similique sed illum aliquam quae temporibus necessitatibus rerum nulla magnam eligendi id pariatur
repudiandae
earum, sit quod accusantium. Odio voluptatem dolor quaerat incidunt consectetur nisi tempore deleniti cumque
rerum ea. Quo asperiores officia molestiae totam eos fugit porro, dolorem, unde earum quam aut dicta, in
numquam
temporibus soluta deserunt! Vero soluta molestias quia! Rem aperiam, tempore possimus quia perspiciatis
explicabo cupiditate error, assumenda, accusantium debitis harum aut nesciunt!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, necessitatibus adipisci!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, deleniti amet, consequuntur, voluptate ullam
placeat dolorem esse ducimus dolorum iusto voluptatem dolores aperiam delectus voluptatibus expedita ipsa
fugit.
Dolorem, blanditiis!</p>
</div>
</body>
</html>- CSS
/* Fixed bottom-nav */
ul.bottom-nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #bebebe;
position: fixed;
bottom: 0;
width: 100%;
}
ul.bottom-nav>li {
float: left;
}
ul.bottom-nav>li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.bottom-nav>li a:hover:not(.active) {
background-color: #555;
color: #fff;
}
ul.bottom-nav>li a.active {
background-color: #4733ff;
}Result:
Ok, the tutorial about CSS3 Navigation Bars has finished. That's just a basic of CSS3 Navigation Bars. If you want to learn more about the CSS3 tutorial, you can find that in the next chapter.
You can also find the full source code of these examples on our GitHub.
That's just the basics. If you need more deep learning about HTML, CSS, JavaScript, or related, you can take the following cheap course:
- HTML & HTML5 For Beginners (A Practical Guide)
- Web - HTML
- Learn HTML, CSS, JAVASCRIPT
- JavaScript:
- Learn JavaScript Fundamentals
- Learning JavaScript Shell Scripting
Thanks!