CSS Navigation Bar

What is a CSS Navigation Bar?

In CSS, a navigation bar is, also known as a navbar used in an interface to provide navigation links or menus to various selectors or page users in website design. Users can easily navigate a website's content using it as a visual guide.

With the help of a navigation bar, we can improve the presentation and styling of a web page, and it also includes the design, colors, fonts, and spacing described using CSS. A CSS navigation bar is developed and styled using CSS properties and rules to produce a particular appearance and functionality.

Characteristics of CSS Navigation Bar

Some characteristics of the navigation bar are as follows:

Layout Options: In CSS, a navigation bar can be positioned either vertically along the side of a web page or we can position horizontally across the top.
Links for navigation: The menu contains links to the site's various pages and sections. These links frequently have button, text, or icon styling.
Dropdown Menus: Dropdown menus are another feature that can be added to navigation bars. Additional links or options are displayed when a user hovers over or selects a menu item.
Style: CSS lets designers alter the navigation bar's visual elements, such as colors, fonts, borders, and hover effects. This aids in producing a unified and visually appealing design that blends with the website's overall aesthetic.
Responsive design: Modern navigation bars are frequently responsively designed, which adjust to various screen sizes and devices. With the help of responsive design, we can guarantee that the navigation will continue to be attractive and pleasing on desktop and mobile devices.
Interaction: with the help of CSS, we can also be used to add interactive effects to navigation elements, such as changing the link color when it is clicked, or it can also show the highlight effect when it is hovered over.

With the help of a CSS navigation bar, we can enhance the user experience and make it simple for visitors to navigate a website's content, so it is a crucial part of web design.

Example

Let's take a simple example of how we can create a horizontal navigation bar using CSS:

<!DOCTYPE html>
<html>
<head>
<style>
/* Basic styling for the navigation bar */
.navbar {
  background-color: #333; /* Background color */
  overflow: hidden; /* Clear floats */
}

/* Style for navigation bar links */
.navbar a {
  float: left; /* Float the links to the left */
  display: block; /* Display links as blocks */
  color: white; /* text color */
  text-align: center; /* Center-align the text */
  padding: 14px 16px; /* Padding around the links */
  text-decoration: none; /* Remove underline from links */
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd; /* Background color on hover */
  color: black; /* Text color on hover */
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#portfolio">Portfolio</a>
  <a href="#contact">Contact</a>
</div>

</body>
</html>

Output:

Five links are being created in this example's horizontal navigation bar: "Home," "About," "Services," "Portfolio," and "Contact." We've used fundamental CSS properties to style the navigation bar, links, and hover effects. Your preferred design can be reflected in the colors, fonts, padding, and other styles.

Limitation of CSS Navigation Bar

There are some limitations of the CSS navigation bar, and some are as follows:

Limited Interaction Complexity: While CSS can produce simple hover effects and transitions, JavaScript may need to implement more intricate interactive features like nested dropdown menus with multiple levels.
Cross-Browser Compatibility: Different web browsers may interpret CSS rules differently so that navigation bars may appear and behave differently. It can be challenging to ensure uniform design across all browsers.
Responsive Design Challenges: Making a navigation bar that functions well on various screens and devices can be difficult. Media queries and additional CSS rules are frequently required to modify the navigation bar's layout for various screen resolutions.
Limited Animation: CSS can handle basic animations, but JavaScript or CSS libraries may be needed to create more complex animations or effects, such as smooth scrolling.
Complex styling: Creating highly unique and intricate designs for navigation bars may call for sophisticated CSS techniques, which can be challenging to update.
Accessibility issues: Navigation bars made entirely of CSS might not always adhere to guidelines for screen readers and other assistive technologies. To make sure that navigation is accessible to all users, extra care must be taken.

Despite these drawbacks, the versatility and widespread use of CSS navigation bars in web design persists. However, they might need to be supplemented with JavaScript and other technologies for more sophisticated features and a seamless user experience.

Horizontal Navigation Bar

The horizontal navigation bar is the horizontal list of links, which is generally on the top of the page.

Let's see how to create a horizontal navigation bar by using an example.

Example

In this example, we are adding the overflow: hidden property that prevents the li elements from going outside of the list, display: block property displays the links as the block elements and makes the entire link area clickable.

We are also adding the float: left property, which uses float for getting the block elements to slide them next to each other.

If we want the full-width background color then we have to add the background-color property to <ul> rather than the <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: blue;  
 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="#">Java</a></li>  
  <li><a href="#">HTML</a></li>  
  <li><a href="#">CSS</a></li>  
</ul>  
  
</body>  
</html>  

Border dividers

We can add the border between the links in the navigation bar by using the border-right property. The following example explains it more 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 blue;  
}  
  
li a {  
  display: block;  
  color: blue;  
 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="#">Java</a></li>  
  <li><a href="#">HTML</a></li>  
  <li><a href="#">CSS</a></li>  
</ul>  
  
</body>  
</html> 

Fixed Navigation bars

When we scrolls the page, fixed navigation bars stay at the bottom or top of the page. See an example of the same.

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 blue;
}

li a {
  display: block;
  color: blue;
 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="#">Java</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
</ul>
<h1 style="padding-top: 100px; text-align: center;">Hello World</h1>
<h2 style="padding-bottom: 2000px; text-align: center;">Scroll down the page to see the fixed navigation bar</h2>

</body>
</html>

Test it Now

Sticky Navbar

The position: sticky; property is used to position the element based on the scroll position of the user.

This CSS property allows the elements to stick when the scroll reaches to a certain point. Depending upon the scroll position, a sticky element toggles in between fixed and relative property.

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 blue;
}

li a {
  display: block;
  color: blue;
 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> Example of sticky navigation bar</h1>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
</ul>
<h1 style="padding-top: 100px; text-align: center;">Hello World</h1>
<h2 style="padding-bottom: 2000px; text-align: center;">Scroll down the page to see the sticky navigation bar</h2>

</body>
</html>

Test it Now

Dropdown Navbar

Following example explain how to create a dropdown menu inside a navigation bar.

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="#">Java</a></li>
  <li><a href="#">C</a></li>
  <li><a href="#">C++</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 the javaTpoint.com</h1>
<h2>Example of Dropdown Menu inside a Navigation Bar</h2>
<h3>Move your cursor on the "web-designing" to see the dropdown effect.</h3>

</body>
</html>

Test it Now

Vertical Navigation bar

In this example, we are going to see how to build a vertical navigation bar.

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: blue;
  font-size:20px;
  padding: 8px 16px;
  text-decoration: none;
}
.active{
  background-color: orange;
  color: white;
}
li a:hover {
  background-color: orange;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<ul>
  <li><a href="#" class = "active">Home</a></li>
  <li><a href = "#">Java</a></li>
  <li><a href = "#">CSS</a></li>
  <li><a href = "#">HTML</a></li>
  <li><a href = "#">Bootstrap</a></li>
</ul>

</body>
</html>

Test it Now

We can align the links to the center and add borders between them. See an example of the same.

Example

In this example, we are adding the text-align: center; property to <li> and <a> to center the links and border property to <ul> to add the border. We will also add the border-bottom property to all <li> elements.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: lightblue;
  border: 1px solid blue;
}

li a {
  display: block;
  color: blue;
  font-size:20px;
  padding: 10px 20px;
  text-decoration: none;
  border-bottom: 1px solid blue;
}
ul:last-child {
  border-bottom: none;
}
.active{
  background-color: orange;
  color: white;
}
li a:hover {
  background-color: orange;
  color: white;
}
</style>
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<ul>
  <li><a href="#" class = "active">Home</a></li>
  <li><a href = "#">Java</a></li>
  <li><a href = "#">CSS</a></li>
  <li><a href = "#">HTML</a></li>
  <li><a href = "#">Bootstrap</a></li>
</ul>

</body>
</html>

Test it Now

Full-height fixed Vertical Navbar

We can also create the fixed full-height side navigation bar by using the properties height: 100%; and postion: fixed;

Example

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: pink;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
height:100%;
top:0;
width:150px;
overflow: auto;
background-color: lightblue;
border: 1px solid blue;
position: fixed;
}
li a {
display: block;
color: blue;
font-size:20px;
padding: 10px 20px;
text-decoration: none;
border-bottom: 1px solid blue;
}
.active{
background-color: orange;
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 = "#">Java</a></li>
<li><a href = "#">CSS</a></li>
<li><a href = "#">HTML</a></li>
<li><a href = "#">Bootstrap</a></li>
</ul>
<div style="margin-left:20%;padding-bottom:2000px;color:blue;">
<h1>Welcome to the javaTpoint.com</h1>
<h2>Side navigation bar with height: 100%; and position: fixed;</h2>
<h3>Scroll the page, and see how the sidenav sticks to the page</h3>

</div>
</body>
</html>

Test it Now

Next TopicCSS overlay

← prev next →