To create an HTML navigation bar, you also need a few lines of CSS to make it attractive. However, this post will give you a couple of navigation bars to choose from. Also, I will link to other posts that will show you how to make the navigation bar responsive.
These are the examples that I used on many projects and you can use them too.
Let’s get started.
Before creating any navigation menu, wrap them in a <nav> tag. This is the best practice and helpful for SEO because the search engines will easily understand the element.
Only by using HTML & CSS, you are able to create outstanding navigation menus. Explore a couple of examples below.
Example 1: Dark background with hover effect
In the above example, if you hover your mouse on the menu links, you will see a nice transition & hover effect. Each of the menu links is separated by a divider that is also creative.
To create such a divider, I used a dark color on the right side & a light color on the left side. The “Home” link has a slightly different background & color. This is just an example of the active state. In many live websites, you will see such examples. So visitors will easily understand which page they are currently visiting. And they don’t even have to look at the URL.
For the above navigation bar, I have the following HTML & CSS:
HTML
<nav id="example-1">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>CSS
nav#example-1 {
background-color: #0C1733;
display: block;
overflow: hidden;
}
nav#example-1 ul {
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
nav#example-1 ul li {
list-style: none;
}
nav#example-1 ul li a {
font-size: 16px;
color: #93EA23;
text-decoration: none;
padding: 15px 10px;
display: block;
text-transform: uppercase;
-webkit-transition: all 0.8s ease;
transition: all 0.8s ease;
border-right: 1px solid #081024;
border-left: 1px solid #122147;
}
nav#example-1 ul li a:hover {
background-color: #13244f;
}
nav#example-1 ul li:first-child a {
border-left: none;
}
nav#example-1 ul li:last-child a {
border-right: none;
}
nav#example-1 ul li.active a, nav#example-1 ul li a:hover {
background-color: #13244f;
color: #FFFFFF;
}Example 2: Minimal design
In this example, I have the exact same HTML for the navigation bar as you saw in the first example. The only difference is the CSS ID (#example-2). And throughout this post, I will use the same markup and only change the nav ID name.
In this navigation bar, I did not use the “active” state or class. This header navigation is very minimal and also professional. Many of you will like it.
Anyways, for this second navigation bar, I have the following HTML & CSS:
HTML
<nav id="example-2">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>CSS
nav#example-2 {
border: 1px solid #DEE1E6;
}
nav#example-2 ul {
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
nav#example-2 ul li {
list-style: none;
margin-right: 15px;
padding: 7px 10px;
}
nav#example-2 ul li a {
text-decoration: none;
color: #222222;
font-weight: 700;
font-size: 16px;
-webkit-transition: 0.8s ease-in;
transition: 0.8s ease-in;
}
nav#example-2 ul li a:hover {
color: #5b5b5b;
}
nav#example-2 ul li:last-child {
margin-right: 0;
}In this 3rd example, you see that the navigation menu is center aligned. It also has a slight text-shadow on hover & for the active link.
In many live websites, we see this type of navigation menu. It is not only professional but also useful when you need to place a logo & CTA on the left & right sides.
For this center-aligned navigation bar, I have the following HTML & CSS:
HTML
<nav id="example-3">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>CSS
nav#example-3 {
background-color: #414141;
}
nav#example-3 ul {
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
nav#example-3 ul li {
list-style: none;
}
nav#example-3 ul li a {
text-transform: uppercase;
font-size: 16px;
color: #FF9800;
font-weight: 700;
text-decoration: none;
padding: 15px 20px;
display: block;
background-color: #575656;
border-right: 1px solid #454444;
border-left: 1px solid #6e6d6d;
-webkit-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
nav#example-3 ul li.active a, nav#example-3 ul a:hover {
color: #FFFFFF;
text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3), 0px -4px 10px rgba(255, 255, 255, 0.3);
}In this 4th example, you see that the navigation bar is full-width and the menu links are justified. No matter how many links this navigation has, it will always take the full available width.
It’s another practical example that you may have seen before.
For this navigation bar, I have the following HTML & CSS:
HTML
<nav id="example-4">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>CSS
nav#example-4 {
background-color: #0C0547;
display: block;
}
nav#example-4 ul {
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
nav#example-4 ul li {
list-style: none;
background-color: red;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
border-right: 1px solid #09023b;
border-left: 1px solid #22148c;
}
nav#example-4 ul li a {
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
color: #89C2FB;
background-color: #12085e;
width: 100%;
display: block;
padding: 10px 0;
-webkit-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
nav#example-4 ul li.active a, nav#example-4 ul a:hover {
background-color: #0C0547;
color: #FFFFFF;
}In this 5th example, you see the navigation menus are right-aligned. You need this type of navigation when you have the logo on the left and the menu links on the right.
For this navigation bar, I have the following HTML & CSS:
HTML
<nav id="example-5">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>CSS
nav#example-5 {
background-color: #FAE3AA;
}
nav#example-5 ul {
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
nav#example-5 ul li {
list-style: none;
}
nav#example-5 ul li a {
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
background-color: rgba(255, 255, 255, 0.4);
display: block;
border-right: 1px solid #FFFFFF;
-webkit-transition: background-color 0.7s ease;
transition: background-color 0.7s ease;
color: #404040;
}
nav#example-5 ul li a:hover {
background-color: #FFFFFF;
color: #000000;
}In this 6th example, the menu links are vertically aligned. You will generally see this type of layout on smaller screen sizes such as mobiles & tabs. Also, there are other use cases.
To create this vertical navigation menu, I have the following HTML & CSS:
HTML
<nav id="example-6">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>CSS
nav#example-6 {
background-color: #193549;
}
nav#example-6 ul {
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
nav#example-6 ul li {
list-style: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
width: 110px;
text-align: center;
-webkit-transition: background-color 0.7s ease;
transition: background-color 0.7s ease;
}
nav#example-6 ul li a {
text-decoration: none;
color: #9EFFFF;
-webkit-transition: color 0.9s ease-in-out;
transition: color 0.9s ease-in-out;
padding: 10px 20px;
display: inline-block;
font-size: 16px;
width: 100%;
}
nav#example-6 ul li a:hover {
color: #FFFFFF;
text-shadow: 2px 2px #222222;
}
nav#example-6 ul li:last-child {
border-bottom: none;
}
nav#example-6 ul li:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #000000;
}Build HTML CSS projects
Conclusion
These are the main navigation bars that I created myself and used on various static HTML websites. You’re free to customize it to match your brand.
You got a couple of real-world examples to choose from. Also, these will give you a good understanding of aligning elements and creating new things on your own.
However, these are not fully mobile-responsive. If you have a long list of menu items, the navigation bar may wrap in multiple lines. So if you want to make them mobile responsive, you need a few lines of JavaScript to handle the click event.
It’s not so hard to understand. I have other posts that show similar things. However, I would recommend you see how to create a hamburger menu using HTML, CSS & JavaScript. This is a very simple and easy-to-understand post. After going through the step-by-step guideline, your menu will be fully responsive for all kinds of devices. A live demo and source code are also included in that post.
