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 Functions

CSS functions are used for different CSS properties. Every front-end developer should have knowledge of all CSS functions. It makes the coding easier. FunctionsExplanationattr().It returns the value of an attribute of...

5 minutes read.

CSS Page-break-before Attribute

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

5 minutes read.

CSS Word Wrap

Word Wrap in CSS: The word-wrap property in CSS is referred to break any lengthy word and wrap towards the next or following line. It is employed for preventing overflow...

1 minute read.

CSS Introduction

CSS stands for Cascading Style Sheet. It is a design language which is used to design the web pages. It was developed by Håkon Wium Lie on October 10, 1994. It provides...

1 minute read.

How to Set Space between the Flexbox

For managing layout on the Web, CSS Flexbox and CSS Grid are two excellent tools. Flexbox handles one-dimensional layouts quite well, whereas CSS Grid manages two-dimensional layouts with columns and...

4 minutes read.

CSS Line Height

CSS Line Height: This property in CSS can be used to describe the line box’s minimal height inside the element. It sets-up the distinction among two lines in our content. It...

3 minutes read.

CSS Padding

CSS Padding: The padding property in CSS is addressed to describe the space among the element border and the element content.This property is quite different from the margin property of...

2 minutes read.

CSS Zoom

CSS Zoom: Zoom property in CSS extents the content. This property controls the content’s level of magnification. Rather than the use of this CSS property, we may also apply the...

3 minutes read.

CSS @keyframes rule

CSS @keyframes rule It describes the rule of animation that depicts the properties of CSS for the components at every state along with the timeline. We may make the properties of complex...

4 minutes read.

CSS Text Effects

Text Effects in CSS We can use distinct text effects used inside the HTML document. Few attributes can be applied to insert the text effects. We can also style various web documents...

5 minutes read.

How to make smooth bounce animation using CSS

The smooth bouncing animation project is done with the help of HTML and CSS. This project gives so much fun and excitement to the users. What is HTML? The HTML or HyperText...

2 minutes read.

How to center a table in CSS

The table is used to store and arrange the data in tabular format. The data here can be of any form like text, image, links, etc. The table is made...

3 minutes read.

Hover condition for a:before and a:after in CSS

In CSS, :after and :before are used to add content after and before the element. The CSS pseudo-class is used to add some styling effect to the webpage. We can change...

4 minutes read.

How to edit CSS in WordPress

Developing a new website or blog is a difficult undertaking. We want to create something that the consumers will adore, but we might not want the setting to take months and...

7 minutes read.

Css Box Model

Introduction The Box Model property of CSS is used for design and layout of an html page. In CSS, all the elements has a rectangular box around it, you have to...

5 minutes read.

Untitled Reusable Block

  ...

1 minute read.

CSS Pseudo-class

Pseudo-class The pseudo-class may be depicted as the keyword which can be mixed to any selector that specifies the elected element’s unique state. It can be included to a selector to...

6 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 calc()

CSS calc(): The CSS calc() function is a CSS function of inbuilt type, which permits us to implement calculations. It is used for calculating the angle, integer frequency, number, time,...

3 minutes read.

CSS 3D Transform

Introduction To understand 3D transformation property of transform you need to first understand the difference between 2D and 3D transform. 2D transform is a CSS effect which transforms the elements according to...

6 minutes read.