CSS Navigation Bar

The CSS Navigation Bar is the combination of Lists and Links.

How to start creating Navigation bars

Step1 : Create an unordered list like below –

<ul>
  <li>Home</li>
  <li>About Us</li>
  <li>Community</li>
  <li>Careers</li>
</ul>

Step2 : Add links to the list items using <a> tag so that the list items becomes clickable.

<ul id="#ul-nb">
  <a href="#"><li>Home</li></a>
  <a href="#"><li>About Us</li></a>
  <a href="#"><li>Community</li></a>
  <a href="#"><li>Careers</li></a>
</ul>

Step3 : Remove the style from the list which makes it look like a bullet list.

#ul-nb {
  list-style: none;
}

Note: You can also use list-style-type:none as well.

Step4 : You can set other style related properties on the list items based on what you want like –

Float properties like float:left
Background color of the link list
Margin, Padding properties – You might require to set Margin and Padding values as 0 if required
Width & Height related properties
text-decoration:none is often used to remove the underline from the link
overflow:hidden is often used to stop the list items to go beyond the list boundary
text-align property etc

Note/Info:

1.You can use <li> inside an <a> tag –

For Example:

<ul id="#ul-nb">
  <a href="#"><li>Home</li></a>
  <a href="#"><li>About Us</li></a>
  <a href="#"><li>Community</li></a>
  <a href="#"><li>Careers</li></a>
</ul>

2.OR, You can also use <a> tag inside <li> tag.

For Example:

<ul id="ul-nb">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Community</a></li>
  <li><a href="#">Careers</a></li>
</ul>

but, you need to keep in mind that if you use the 2nd format, you should use-

display:block;

so that the whole link area will be clickable.

Example of creating Navigation bars

#ul-nb {
  list-style: none;
  margin:2px;
  padding:3px;
}

#ul-nb li {
  float:left;
  padding:10px;
  background:orange;
  text-align: center;
  margin-left:5px;
}

#ul-nb li:hover {
  background:red;
  opacity:0.8;
  color:white;
}

Horizontal navigation bar

The Horizontal Navigation Bar is also referred to as “Horizontal Nav Bar”. Basically, it is the Navigation Bar which is in horizontal direction along X-Axis.

There are 3 ways to create Horizontal Navigation bars –

Making list items as Float without using the display as block.
Making list items as Float with display as block.
Using list items as inline.

We have already shown a simple way to create Horizontal Navigation Bar without display as block(option 1)

Let us see how to create Horizontal Navigation bar using option 2 and 3.

Horizontal Navigation using Float & display as block

The float property is often used with display:block property so that the elements fits side by side horizontally and width and height property can be set easily.

Example of Horizontal Navigation using Float & display as block

#ul-nb {
  list-style: none;
  overflow:hidden;
  background:red;
  margin:0;
  padding:0;  
}

#ul-nb li a {
  text-align:center;
  padding:10px;
  width:80px;
}

#ul-nb li {
  float:left;
}

#ul-nb li:hover {
  background:brown;
}

a {
  display:block;
}

Horizontal Navigation using display as Inline

If you create Horizontal Nav Bar using display as Inline then you will not be able to apply the width and height properties.

Inline Display does not have any effect on width & height properties.

Example

#ul-nb {
  list-style: none;
}
  
#ul-nb li {
  display:inline;
  padding:10px;
  background:blue;
  color:white;
  text-align: center;
  margin-left:5px;
}
  
#ul-nb li:hover {
  background:red;
  color:yellow;
}

Horizontal Navigation bars by creating dividers

You can create dividers between menus. Let us see how-

Example

.navigation-menu ul {
  padding: 0px;
  margin: 0px;

}
ul {   
    padding: 0;
    overflow: hidden;
    background-color: skyblue;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
}

li a:hover {
    background-color: slateblue;
}

#navigation ul
{
	font-size: 1.4em;
}

#navigation ul li
{
    display: inline;
	color:white;
}
#navigation li:not(:first-child):before {
    content: " | ";
}

More Example Horizontal Navigation bars

Example

.navigation-menu ul {
  padding: 0px;
  margin: 0px;
}
ul {
    padding: 0;
    overflow: hidden;
    background-color: black;
}
li {
    float: left;
    list-style-type:none;
}
li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
}
li a:hover {
    background-color:crimson;
}
#navigation ul
{
	font-size: 1.5em;
}

Vertical Navigation Bar

Explanation of the random topic is here

Example

#ul-nb {
  list-style: none;
  overflow:hidden;
  background:aqua;
  margin:0;
  padding:0;
  width:100px;
}
#ul-nb li a {
  padding-bottom:5px;
  width:80px;
}

#ul-nb li:hover {
  background:brown;
}
a {
  display:block;
}

Vertical Navigation Bar with Active Link

Explanation of the random topic is here

Example

body {
  margin:0;
  padding:0;
}
#ul-nb {
  list-style: none;
  border:2px solid blue;
  border-radius:5px;
  overflow:hidden;
  background:lightgray;
  margin:0;
  padding:0;
  width:150px;
}
#ul-nb li a {
  text-align:left;
  text-decoration:none;
  padding:10px;
}
#ul-nb li:hover {
  background:brown;
}
a {
  display:block;
}
.active-link {
  background:grey;
}

More Example Vertical Navigation bars

Example

.navigation-menu ul {
  padding: 0px;
  margin: 0px;

}
  
ul {  
    padding: 0;
    overflow: hidden;
    background-color: black;
}

li {
    list-style-type:none;
}

li a {
    display: block;
    color: white;
    text-align: left;
    padding: 10px 20px;
    text-decoration: none;
}

li a:hover {
    background-color:crimson;
}

#navigation ul
{
	font-size: 1.5em;
}

Navigation Bar with Logo

Most of the modern websites have logo at either –

Top-left corner
Top-center
Top-right corner

You can use properties like-

line-height property- Set the line-height of the menu items.
float property: You can code float:left to float the logo to the Top-left corner, float:right to float the logo to the Top-right corner.

Below is an example of Navigation Bar with Logo & the Navigation Bar is at the center.

Example

.nav-bar {
  background-color: lightgray;
  height: 56px;
  width: 100%;
  text-align:center;
}
.nav-bar img{
  float:left;
}
.nav-bar ul {
  padding: 0;
  margin: 0;
}

.nav-bar li {
  list-style: none;
  padding: 0;
  display: inline-block;
}

.nav-bar li a {
  text-decoration: none;
adding: 15px;
olor: #e25822;
  line-height: 55px;
}

#nav-container {
  width: 100%;
  margin: 0;
adding: 0;
}

body {
  margin: 0;
  padding: 0;
}

Note/Info/Success If you just add float:left; on the unordered list, then the menu bar will moves towards the left.

Fixed Navigation Bar

In this example, we are going to show you how you can create a fixed navigation Bar. This means, we are going to freeze the navigation bar at one place even when the user scrolls the Web page.

Tips:

Use position:fixed for unordered list(ul)
Remove the style from the list using list-style-type:none
Use display: block for anchors

Example for Fixed Navigation Bar

.fix-navigation-menu ul {
 padding: 0px;
 margin: 0px;
 font-size: 1.5em;
}

ul {
 position: fixed;
 background-color: black;
}

li {
 list-style-type:none;
}

li a {
 display: block;
 color: white;
 text-align: left;
 padding: 10px 20px;
 text-decoration: none;
}

li a:hover {
 background-color:crimson;
}

.textalignval {
 float: left;
 padding: 1px 200px;
 width: 60%;
 height: 300px;
}

Sidebar navigation menu

The above example is also an example of a Sidebar Navigation Menu.

If you remove display: block, the navigation bar will not have a full height but an automatic height.

You can add overflow-x:auto to add a horizontal scroll which will only appear in case of overflow else you can also add overflow-x:hidden to hide the horizontal scrolling.

Example for sidebar navigation menu

.fix-navigation-menu ul {
 padding: 0px;
 margin: 0px;
 font-size: 1.5em;
}

ul {
 position: fixed; /*Fix the position even on scroll */
 background-color: black;
}

li {
 list-style-type:none; /* Remove to style type*/
}

li a {
 color: white;
 text-align: left;
 padding: 2px;
 text-decoration: none; /* Remove to see output*/
}

li a:hover {
 background-color:crimson;
}

.textalignval {
 float: left; /* No effect if display:block*/
 padding: 1px 200px;
 width: 60%;
 height: 300px;
}

Drop down Navigation Menu

The justify-content: space-between aligns the Flex Items along the main axis in such a way that each 2 successive items have equal spaces in between them. This means that there is no extra space before the 1st Flex items and after the last Flex items.

Tips:

- Hide the Menu items at start by hiding the unordered list inside the main menus by using –

li ul {
 display: none; 
}

- Display the items inside each menu vertically and the position of each element must be relative to other elements. Code like this –

li:hover ul {
 display: block;
 position: absolute; 
}

Do not float the list to left or right. Add the float: none

Warning/Danger/Info/Success Do not use visibility:hidden instead of display: none because display: none removes the element from the layout flow and do not occupy the space while visibility: hidden hides the elements but occuies space

Example of Drop down Navigation Menu

ul {
 list-style: none; 
 padding: 2px;
}
ul li {
 display: block; 
 float: left; 
}
li ul {
 display: none; 
}
ul li a {
 display: block; 
 background-color:#0076B9;
 padding: 10px;
 text-decoration: none;
 color: white;
 width:100px;  
 border: 1px solid red;
}
ul li a:hover {
 background-color:#0076B9; 
 color:white;
}
li:hover ul {
 display: block; 
 position: absolute; 
}
li:hover li {
 float: none; 
}
li:hover a {
 background-color:#94C548; 
 color:black;
}
li:hover li a:hover {
 background: black;
 width:100px;
}

Responsive Navigation Bar

It is important to create a Navigation bar which looks good in all device sizes by making it responsive.

The best way to make the navigation bars responsive is by using Media Queries

Example of Responsive Navigation Bar

 * {
 box-sizing: border-box;
}

body {
 margin: 0px;
 font-family: 'georgia';
}

.responsive-navbar {
 width: 100%;
 height: 50px;
 background-color: #117DA9;
 position: relative;
}

.responsive-navbar .res-menu {
 display: inline-block;
}

.responsive-navbar > .res-menu > .navvalue {
 display: inline-block;
 font-size: 22px;
 color: Gold;
 padding: 15px;
}

.responsive-navbar > .res-navbtn {
 display: none;
}

.responsive-navbar > .resnavbar-links {
 display: inline;
 float: right;
 font-size: 18px;
}

.responsive-navbar > .resnavbar-links > a {
 display: inline-block;
 padding: 13px 10px 13px 25px;
 text-decoration: none;
 color:White;
 font-size:22px
}

.responsive-navbar > .resnavbar-links > a:hover {
 background-color: gold;
 color:black;
}

.responsive-navbar > #resnavbar-type {
 display: none;
}

@media all and (max-width:650px) {
 .responsive-navbar > .res-navbtn {
   display: inline-block;
   position: absolute;
   right: 0px;
   top: 0px;
}

.responsive-navbar > .res-navbtn > label {
 display: inline-block;
 width: 50px;
 height: 50px;
 padding: 12px;
}

.responsive-navbar > .res-navbtn > label:hover,.nav  #resnavbar-type:checked ~ .res-navbtn > label {
 background-color: gold;
}

.responsive-navbar > .res-navbtn > label > span {
 display: block;
 width: 25px;
 height: 10px;
 border-top: 2px solid white;
}

.responsive-navbar > .resnavbar-links {
 position: absolute;
 display: block;
 width: 100%;
 background-color: #1ba1d6;
 height: 0px;
 overflow-y: hidden;
 top: 50px;
 left: 0px;
}

.responsive-navbar > .resnavbar-links > a {
 display: block;
 width: 100%;
}

.responsive-navbar > #resnavbar-type:not(:checked) ~ .resnavbar-links {
 height: 0px;
}

.responsive-navbar > #resnavbar-type:checked ~ .resnavbar-links {
 height: 100vh;
 overflow-y: auto;
 outline:2px solid gold;
}
}