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

How To Use CSS

You can use CSS(Cascading Style Sheet) in four ways. These are given below: The given above CSS type, in which various technique will be used. These are different from each other and...

2 minutes read.

CSS Dropdowns

Dropdowns are one of the maximum crucial parts of an interactive internet site. CSS is a kind used to design the drop-down menus. A drop-down essentially is a group of...

5 minutes read.

What is a CSS File?

What is a CSS File and How to use it in Html? CSS: - CSS stands for Cascading Style Sheet. CSS is a file of style sheets that describe the presentation of...

4 minutes read.

CSS Syntax

The CSS syntax contains the selector and the declaration block, which will be clearer with the following example: Selector: A CSS selector specifies the HTML tag we wish to style. A selector can be...

2 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.

CSS Outline

CSS Outline: This CSS property is quite similar to the border property of CSS. It eases us to design an additional border around the element to obtain visual attention. The...

4 minutes read.

CSS Image Gallery

Image galleries are used to display and store collections of images. Example Let’s discuss an example. CSS was used to create the following image gallery: Code is as follows: <html> <head> <style> div.gallery {   margin: 6px;   border: 1px...

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.

CSS Margin

CSS Margin: The CSS margin property is employed to describe the space throughout the elements. It clears the range throughout the element. These properties do not have a background color...

2 minutes read.

CSS Color Keywords

Here, we will discuss the following keywords: transparent currentcolor Inherit Transparent keyword A color can generally be made transparent by using the transparent keyword. Often it is used to for all intents...

4 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.

CSS Letter-spacing

CSS Letter-spacing: Letter-spacing attribute is applied to manage the space among all letters within the block or element of the text. This property sets the behavior of the spacing between...

2 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 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.

Create a 3D text effect using HTML and CSS

A3D text effect is a beautiful and attractive part of a webpage. As a web page developer, it is crucial to know how to create a 3D text effect with...

3 minutes read.

CSS Comments

CSS Comments: Generally, comments in CSS are used to describe our code. Further, it will provide support to many users who are concerned with the code. Somewhat, these are ignored...

2 minutes read.

CSS Font

CSS Font: CSS has font property, which makes the text more attractive. We can alter the entire look by changing font color, font size, font style, and much more. In...

5 minutes read.

CSS Inline

What is CSS? CSS is an acronym for Cascading Style Sheets. CSS is the language that we use to style an HTML document. It specifies how HTML components should appear. CSS...

4 minutes read.

CSS Transition

CSS Transition The transitions in CSS are influenced, included to modify the component from one design to another, without the use of the JavaScript or Flash. We should describe two of the...

2 minutes read.

CSS Hover

CSS Hover: CSS :hover is used to select the various elements whenever we point the mouse on these elements. We can also use this selector on all the HTML elements,...

3 minutes read.