OneBite.Dev - Coding blog in a bite size

make a navigation bar in html and css

Code snippet for how to make a navigation bar in html and css with sample and detail explanation

Creating a navigation bar in HTML and CSS can be a worthwhile feature to add functionality and enhanced user experience to any website. A navigation bar serves as a main interface that presents the site’s primary content categories or areas.

Code Snippet

<!DOCTYPE html>
<html>
<head>
<style>
   ul {
       list-style-type: none;
       margin: 0;
       padding: 0;
       overflow: hidden;
       background-color: #333;
}

li {
   float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Code Explanation

The list style type for ‘ul’ is set to none to remove the bullet icons, and overflow is set to hidden to clear the float. The background color of the navigation bar is set to a dark shade (#333).

The ‘li’ items are set to float left which helps arrange the items in one line horizontally.

For the ‘li a’, CSS is used to style the anchor links within the navigation bar. The text color is set to white with a decent amount of padding on all sides. Text decoration is also set to none to remove any underlines from the links.

In addition to this, a hover effect is added, which changes the background color of a navigation item when the mouse pointer hovers over it. Following these steps will enable you to develop a decent and functional navigation bar for your website.

css