How to Create a Nav Bar Using HTML and CSS

A navigation bar, or nav bar for short, is one of the most important design elements of any website. It enables users to browse through different sections or pages of your website easily, and it provides them with clear direction on where they are and where they can go. A well-designed nav bar is not only functional, but also aesthetically pleasing, and creating one from scratch can seem like a daunting task, especially for beginners. However, with the right knowledge and tools, anyone can create a nav bar using HTML and CSS. In this article, we’ll walk you through the steps of creating a nav bar from scratch using these two languages.

HTML Structure

Before diving into the CSS styling of your nav bar, it’s important to understand the HTML structure required to create it. A basic nav bar typically consists of an unordered list (<ul>) with list items (<li>) that represent the different sections or pages of your website. Each list item contains an anchor tag (<a>) that links to the corresponding section or page. Here’s an example of the HTML structure for a simple nav bar:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

In this example, we’ve used the <nav> tag to indicate that this is a navigation bar, although this is not necessary for the functionality of the nav bar. The unordered list contains four list items, each with an anchor tag that links to a different section of the website using the href attribute. The # symbol is used here to indicate a placeholder for the actual link.

Applying Basic CSS

Now that we have the basic HTML structure in place, we can apply some basic CSS styling to make our nav bar more visually appealing. The first thing we’ll do is remove the default list styling that comes with the <ul> tag, and center the nav bar on the page. We’ll also add some padding and margin to the list items to give them some breathing room:

nav {
  text-align: center;
  background-color: #333;
}

ul {
  list-style:none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  margin: 20px;
}

In this example, we’ve set the background color of the nav bar to a dark gray (#333), and center-aligned the navigation links using the text-align property on the <nav> tag. We’ve also added some padding and margin on the <ul> and <li> tags using the relevant properties.

Styling the Links

The next step is to style the individual links and add some effects to them when a user hovers or clicks on them. We’ll change the font to something more legible, and add some color and size to the links:

a {
  display: block;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}

a:hover {
  color: #ff4500;
}

a:active {
  color: #ff8c00;
}

In this example, we’ve set the link color to white, removed the underline using text-decoration, and made the font bold and slightly larger. When a user hovers over a link, the color changes to a bright orange (#ff4500), and when they click on it, the color changes to a darker orange (#ff8c00).

Styling the Active Link

To make it clear which link corresponds to the current page or section, we’ll add a special style to the active link. We’ll do this by adding a class to the list item that corresponds to the current page or section, and apply a different background color to it:

<nav>
  <ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

In this example, we’ve added the class active to the Home list item. We’ll now add some CSS to give it a different background color:

li.active {
  background-color: #ff4500;
}

Responsive Design

Finally, we’ll make our nav bar responsive, so it adjusts to different screen sizes and devices. To do this, we’ll use media queries and adjust the CSS accordingly. Here’s an example:

@media screen and (max-width: 600px) {
  li {
    display: block;
    margin: 10px 0;
  }

  nav {
    font-size: 14px;
  }
}

In this example, we’ve targeted screens with a maximum width of 600 pixels using the max-width property. When the screen is smaller than this, we’ve changed the display property of the list items to block, so that they stack vertically. We’ve also reduced the font size of the nav bar.

Conclusion

Creating a nav bar using HTML and CSS is a fundamental skill in web development, and with the right knowledge and tools, anyone can do it. We’ve covered the basic HTML structure of a nav bar, as well as some initial styling using CSS. We’ve also applied effects to the links, including an active state to indicate the current page or section. Finally, we’ve made our nav bar responsive, so it works on different screen sizes and devices. With this knowledge, you’re well on your way to creating a beautiful and functional nav bar for your website.

📕 Related articles about CSS

• How to Insert HTML Images: A Comprehensive Guide for Beginners
• Everything You Need to Know About CSS Media Queries
• What is CSS: The Comprehensive Guide
• How to make a website HTML CSS JavaScript
• Bootstrap CSS Framework Tutorial: A Comprehensive Guide for Web Developers
• How to make website HTML and CSS