How to create a Navigation Icon Bar using HTML and CSS

A navigation icon bar is a crucial element in modern web design. It helps users navigate a website easily while enhancing the overall user experience. Whether you’re creating a simple blog or a full-fledged business website, a well-designed navigation bar ensures better usability and accessibility.

Step 1: Setting up the HTML structure of Navigation Icon Bar

In this tutorial, we’ll walk you through the process of building a sleek and functional navigation icon bar using HTML and CSS. You’ll also learn how to use icons for better visual appeal and ensure responsiveness for different screen sizes.

First, we need to create the basic HTML structure. Open your text editor and create an HTML file. Let’s start by adding the following code:

✲ index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"/>
  <title>Navigation Icon Bar | Coding Zemigle</title>
</head>
<body>
  <div class="icon-bar">
  <a class="active" href="#"><i class="fa fa-home"></i></a> 
  <a href="#"><i class="fa fa-search"></i></a> 
  <a href="#"><i class="fa fa-bell"></i></a> 
  <a href="#"><i class="fa fa-envelope"></i></a>
  <a href="#"><i class="fa fa-user"></i></a>
</div>
</body>
</html>

In this code, we have created a simple navigation bar with four items: Home, About, Services, and Contact. Each item is linked to a section of the page (which you can define later) and contains an icon.

Step 2: Styling the Navigation Bar with CSS

To add icons to our navigation bar, we will use Font Awesome, a popular icon library. Include the following line in the <head> section of your HTML file to load Font Awesome.

Now that we have our HTML structure ready, it’s time to style it using CSS. Create a new file named styles.css and add the following code:

✲ style.css

body {
  background: #EBEDEF;
  padding: 10px;
}

.icon-bar {
  width: 100%;
  margin-top: 50%;
  background-color: #212F3C;
  border-radius: 5px;
  overflow: auto;
}

.icon-bar a {
  float: left;
  width: 20%;
  text-align: center;
  padding: 15px 0;
  transition: all 0.3s ease;
  color: white;
  font-size: 30px;
}

.icon-bar a:hover {
  background-color: #28B463;
}

We remove the default margin and set a default font, give the navbar a full width, a background color, and ensure content overflow is handled. We remove the default padding and margin for the list, remove bullets, and use Flexbox for even spacing. Links are styled to be block elements with white text, centered alignment, padding, and no underlines. Hover effects are added for better user interaction. Icons are styled to be block elements, with a font size and margin for spacing.

This media query will stack the navigation items vertically and adjust the padding and font size for smaller screens.

Step 3: Enhancing the Navbar’s Responsiveness

To ensure that our navigation bar looks good on all devices, we need to make it responsive. Add the following media query to your CSS file:

✲ style.css

@media (max-width: 600px) {
.icon-bar {
  flex-direction: column;
}

.icon-bar a {
  padding: 10px;
  font-size: 18px;
}

.icon-bar a i {
  font-size: 24px;
}
}

This media query will stack the navigation items vertically and adjust the padding and font size for smaller screens.

Step 4: Final Touches and Testing

Save your files and open the HTML file in a browser. You should see a stylish and functional navigation icon bar that adapts well to different screen sizes.

Creating a navigation icon bar using HTML and CSS is straightforward yet essential for improving the usability of your website. By following the steps outlined in this article, you can build a navigation bar that is both visually appealing and user-friendly. Experiment with different styles and icons to match your website’s theme and provide the best experience for your visitors.