Logo
×

CSS Navigation bar

CSS Navigation bar: A navigation system or navigation bar comes upon GUI that can help many visitors to access the information. A Navigation bar is a UI component on the webpage, which contains links for many website’s other sections.

Mostly, a navigation system is shown on the page’s top area in order of the link’s horizontal list. It may be positioned below the header or logo, although it must always be positioned before the primary content of a webpage.

Every website has easy-to-use and efficient navigation, which allows many visitors to access any section easily and quickly. It also plays a vital role.

Let’s discuss the horizontal and vertical navigational system in detail. Have a look.

Horizontal Navigation Bar

Generally, a horizontal navigation system is shown on the page’s top area in order of the link’s horizontal list.

Let’s understand how to make the horizontal navigation system with the help of an example.

Example:

In the following example, we have inserted the property, i.e., overflow: hidden that restricts the li tag from moving the list’s outside. The property display: block shows many links as a block component and creates the whole link space clickable.

Also, we are inserting the property float: left, which adds float for taking any block component to shift them later to each other.

If we want the background color in full-width, we should apply the property background-color to <ul> instead of using any <a> element.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul
{ 
 list-style-type: none; 
 margin: 0; 
 padding: 0px; 
 overflow: hidden; 
 background-color: lightgray; 
} 
li
{ 
 float: left; 
} 
li a
{ 
 display: block; 
 color: red; 
 font-size:20px; 
 text-align: center; 
 padding: 10px 20px; 
 text-decoration: none; 
} 
.active
{ 
 background-color: gray; 
 color: white; 
} 
li a:hover
{ 
 background-color: orange; 
 color: white; 
} 
</style> 
</head> 
<body> 
<ul> 
  <li><a class="active" href="#home">Home</a></li> 
  <li><a href="#">Python</a></li> 
  <li><a href="#">DBMS</a></li> 
  <li><a href="#">Java</a></li> 
</ul> 
</body> 
</html> 

Output:

CSS Navigation bar

Border dividers

It allows us to insert a border between any links inside the navigation system with the use of the property border-right. The following illustration describes it clearly.

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul
{ 
  list-style-type: none; 
  margin: 0; 
  padding: 0px; 
  overflow: hidden; 
  background-color: lightgray; 
} 
li
{ 
  float: left; 
  border-right: 1px solid red; 
} 
li a
{ 
  display: block; 
  color: red; 
  font-size:20px; 
  text-align: center; 
  padding: 10px 20px; 
  text-decoration: none; 
} 
.active
{ 
  background-color: gray; 
  color: white; 
} 
li a:hover
{ 
  background-color: orange; 
  color: white; 
} 
</style> 
</head> 
<body> 
<ul> 
  <li><a class="active" href="#home">Home</a></li> 
  <li><a href="#">Python</a></li> 
  <li><a href="#">DBMS</a></li> 
  <li><a href="#">JAVA</a></li> 
</ul> 
</body> 
</html> 

Output:

CSS Navigation bar

Fixed Navigation Bars

If we scroll any page, this navigation bar stops at the top or the bottom of a page. Let’s consider an example given below:

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul
{ 
  list-style-type: none; 
  position: fixed; 
  width:100%; 
  top:0; 
  margin: 0; 
  padding: 0px; 
  overflow: hidden; 
  background-color: lightgray; 
} 
li
{ 
  float: left; 
    border-right: 1px solid red; 
} 
li a
{ 
  display: block; 
  color: red; 
 font-size:20px; 
  text-align: center; 
  padding: 10px 20px; 
  text-decoration: none; 
} 
.active
{ 
background-color: gray; 
color: white; 
} 
li a:hover
{ 
  background-color: orange; 
  color: white; 
} 
</style> 
</head> 
<body> 
<ul> 
  <li><a class="active" href="#home">Home</a></li> 
  <li><a href="#">Python</a></li> 
  <li><a href="#">DBMS</a></li> 
  <li><a href="#">JAVA</a></li> 
</ul> 
<h1 style="padding-top: 100px; text-align: center;">Hello World</h1> 
<h2 style="padding-bottom: 2000px; text-align: center;">Scroll down this page to see the effect of fixed navigation bar</h2> 
</body> 
</html> 

Output:

CSS Navigation bar

Sticky Navbar

The property position: sticky is applied to place an element according to the user’s scroll position.

This property of CSS allows an element to be stuck if the scroll grasps to any particular point. Any sticky element in it switches among the relative and fixed properties.

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul
{ 
  list-style-type: none; 
  position: sticky; 
  width:100%; 
  top:0; 
  margin: 0; 
  padding: 0px; 
  overflow: hidden; 
  background-color: lightgray; 
} 
li
{ 
  float: left; 
    border-right: 1px solid red; 
} 
li a
{ 
  display: block; 
  color: red; 
 font-size:20px; 
  text-align: center; 
  padding: 10px 20px; 
  text-decoration: none; 
} 
.active
{ 
background-color: gray; 
color: white; 
} 
li a:hover
{ 
  background-color: orange; 
  color: white; 
} 
</style> 
</head> 
<body> 
<h1> Sticky Navigation Bar</h1> 
<ul> 
  <li><a class="active" href="#home">Home</a></li> 
  <li><a href="#">PYTHON</a></li> 
  <li><a href="#">DBMS</a></li> 
  <li><a href="#">JAVA</a></li> 
</ul> 
<h1 style="padding-top: 100px; text-align: center;">Hello World</h1> 
<h2 style="padding-bottom: 2000px; text-align: center;">Scroll down this page to examine the sticky navigation bar</h2> 
</body> 
</html> 

Output:

CSS Navigation bar

Dropdown Navbar

How can we make the dropdown menu in any navigation bar?

In order to find the solution for the above such problems, let’s consider an example given below:

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul
{ 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
  background-color: lightgray; 
} 
li
{ 
  float: left; 
} 
li a, .dropbtn
{ 
  display: inline-block; 
  color: blue; 
 font-size:20px; 
  text-align: center; 
  padding: 10px 20px; 
  text-decoration: none; 
} 
.active
{ 
background-color: gray; 
color: white; 
} 
li a:hover , .dropdown:hover .dropbtn
{ 
  background-color: orange; 
  color: white; 
} 
.dropdown-content
{ 
  display: none; 
  position: absolute; 
  background-color: lightblue; 
  min-width: 160px; 
  box-shadow: 5px 8px 10px 0px black; 
 } 
.dropdown-content a
{ 
  color: black; 
  padding: 12px 16px; 
  text-decoration: none; 
  display: block; 
  text-align: left; 
} 
.dropdown-content a:hover
{ 
background-color: gray; 
color:white; 
} 
.dropdown:hover .dropdown-content
{ 
  display: block; 
} 
h1,h2,h3
{ 
text-align:center;  
color: green; 
} 
</style> 
</head> 
<body> 
<ul> 
  <li><a class="active" href="#home">Home</a></li> 
  <li><a href="#">Python</a></li> 
  <li><a href="#">C</a></li> 
  <li><a href="#">DBMS</a></li> 
  <li class="dropdown"> 
    <a href="#" class="dropbtn">Web-designing</a> 
    <div class="dropdown-content"> 
      <a href="#">HTML</a> 
      <a href="#">CSS</a> 
      <a href="#">Bootstrap</a> 
    </div> 
  </li> 
</ul> 
<h1>Welcome to this Page</h1> 
<h2>Dropdown Menu within the Navigation Bar</h2> 
<h3>Point the cursor over the "web-designing" to examine this dropdown effect.</h3> 
</body> 
</html> 

Output:        

CSS Navigation bar

Vertical Navigation Bar

We will understand the building of the vertical navigation bar in the following example.

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul
{ 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  width: 200px; 
  background-color: lightblue; 
} 
li a
{ 
  display: block; 
  color: red; 
  font-size:20px; 
  padding: 8px 16px; 
  text-decoration: none; 
} 
.active
{ 
  background-color: navy; 
  color: white; 
} 
li a:hover
{ 
  background-color: orange; 
  color: white; 
} 
</style> 
</head> 
<body> 
<h2>Vertical Navigation Bar Example</h2> 
<ul> 
  <li><a href="#" class = "active">Home</a></li> 
  <li><a href = "#">Python</a></li> 
  <li><a href = "#">DBMS</a></li> 
  <li><a href = "#">C++</a></li> 
  <li><a href = "#">Bootstrap</a></li> 
</ul> 
</body> 
</html> 

Output:

CSS Navigation bar

We can specify the link alignment in center and insert borders among them. Consider an example below.

 Example:

In the following example, we will insert the property text-align: center; to <a> and <li> to center any link and attribute border to <ul> for adding the border. Also, we are including the property border-bottom to every <li> element. Let’s consider the following illustration:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul
{ 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  width: 200px; 
  background-color: lightblue; 
  border: 1px solid red; 
} 
li a
{ 
  display: block; 
  color: red; 
  font-size:20px; 
  padding: 10px 20px; 
  text-decoration: none; 
  border-bottom: 1px solid red; 
} 
ul:last-child
{ 
  border-bottom: none; 
} 
.active
{ 
  background-color: navy; 
  color: white; 
} 
li a:hover
{ 
  background-color: orange; 
  color: white; 
} 
</style> 
</head> 
<body> 
<h2>Vertical Navigation Bar Example</h2> 
<ul> 
  <li><a href="#" class = "active">Home</a></li> 
  <li><a href = "#">Pyhton</a></li> 
  <li><a href = "#">DBMS</a></li> 
  <li><a href = "#">C++</a></li> 
  <li><a href = "#">Bootstrap</a></li> 
</ul> 
</body> 
</html> 

Output:

CSS Navigation bar

Full-height fixed Vertical Navbar

Also, we are making a full-height fixed side navigation bar with the help of the position: fixed; property and height: 100%; property. Let’s consider the following illustration:

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body
{ 
background-color: yellow; 
} 
ul
{ 
list-style-type: none; 
margin: 0; 
padding: 0; 
height:100%; 
top:0; 
width:150px; 
overflow: auto; 
background-color: lightblue; 
border: 1px solid red; 
position: fixed; 
} 
li a
{ 
display: block; 
color: red; 
font-size:20px; 
padding: 10px 20px; 
text-decoration: none; 
border-bottom: 1px solid red; 
} 
.active
{ 
background-color: navy; 
color: white; 
} 
li a:hover
{ 
background-color: orange; 
color: white; 
} 
</style> 
</head> 
<body> 
<ul> 
<li><a href = "#" class = "active">Home</a></li> 
<li><a href = "#">Python</a></li> 
<li><a href = "#">DBMS</a></li> 
<li><a href = "#">C++</a></li> 
<li><a href = "#">Bootstrap</a></li> 
</ul> 
<div style="margin-left:20%;padding-bottom:2000px;color:blue;"> 
<h1>Welcome to this Page</h1> 
<h2>Side navigation bar with height: 100%; and position: fixed;</h2> 
<h3>Scroll this page, and examine how the sidenav sticks on the page</h3> 
</div> 
</body> 
</html> 

Output:

CSS Navigation bar

Related Topics

CSS Browser Support

The desk underneath lists of all CSS properties and the way each belongs to it is supported in the generally unique browsers: - The quantity to the right of the browser...

2 minutes read.

CSS Arrow

CSS Arrow The arrow of CSS is applied to insert an array with the tooltip. It can make a tooltip as any speech bubble. Also, this arrow can be illustrated in...

4 minutes read.

CSS Background Color

It is one of the CSS properties to apply styling to html elements.This property is used to apply the background color to any HTML element.The background of an element includes...

2 minutes read.

CSS Order

CSS Order CSS order property in CSS describes the flex item’s order inside the flex or any grid container. It is applied to order any flex item. Note: If any component is...

3 minutes read.

CSS Important

CSS Important: CSS !important property is used to provide more importance, as compared to other CSS properties. The meaning of this property is “This is important.” This property enables CSS...

2 minutes read.

Cascading Style Sheet

CSS refers to the Cascading Style Sheet. CSS is a form of a programming language. In other words, CSS is a language of the style sheet that is utilised for...

7 minutes read.

CSS Links

CSS Link is used to create styled link. There are various ways to implement it. Styling Links Link can be styled with CSS properties like color, font-family, background etc. Example: <!DOCTYPE html>   <html>   <head>   <style>   a {       color: red;   }   </style>   </head>   <body>   <p><b><a href="https://www.tutorialandexample.com"    target="_blank">This is a link</a></b></p>   </body>   </html> Try Now There are four...

2 minutes read.

CSS Page-break-after Attribute

Page-break-after Attribute As its name implies, the page-break-before property is applied to include page break after any element, at the time of printing a document. It adds the page break after...

5 minutes read.

CSS Loader

CSS Loader The loader is the animation that can alert a visitor regarding the loading of the page. We need to wait for some time. It will be helpful if any...

4 minutes read.

CSS Pseudo-elements

Pseudo-elements The pseudo-classes in CSS can be represented as any keyword which is connected to the selector that represents any selected element’s unique state. On the other hand, pseudo-elements can be...

6 minutes read.

CSS Radio Button

Radio Button A radio button has been defined as an element of HTML. It can support us to take any input from the user. But it is challenging to design a...

4 minutes read.

CSS Form

You can create attractive HTML form by using CSS. Style input Fields The Input Field width properties are used to determine the width of the input field. Let us see an example of CSS style...

2 minutes read.

CSS Gradient

CSS Gradient: The CSS gradient property is applied to show the smooth transition inside two specified colors or more than two specified colors. Need of CSS Gradient The following are a few...

4 minutes read.

CSS Checkbox style

CSS Checkbox style: It is an element of HTML, which is used to get input from various users. It is difficult to style any checkbox. However, some elements make it...

6 minutes read.

CSS Lists

CSS Lists: Several properties are available in CSS that are used to manage the lists. Lists are distributed as ordered and unordered kind of lists. The ordered lists provide the...

7 minutes read.

How to create blinking text using CSS

The blinking effect is used in HTML and CSS to take the attraction towards a particular word or section. If you need such a blinking effect, we need to take...

2 minutes read.

CSS Vertical Align

Vertical Align The vertical align CSS property describes the cell box of the table and an inline alignment vertically. This property is a self-explanatory and an essential property in CSS. But,...

2 minutes read.

CSS User Interface

Introduction User Interface can be defined as series of visual elements like screens, buttons, forms that help the user interact with the software application or hardware device. CSS User Interface allows the...

6 minutes read.

CSS Tutorial

CSS refers to the Cascading Style Sheet. CSS is a form of a programming language. In other words, CSS is a language of the style sheet that is utilised for...

9 minutes read.

How to change background color in CSS

How to change background color in CSS? The background-color property in CSS would be used to specify the color of an element's background. As the element's background, it uses solid colors. The...

3 minutes read.