Coding Zemigle

Home
CSS
Editor's Choice

How to create Navigation Icon Bar using HTML and CSS

Navigation Icon Bar | Coding Zemigle

In web development, a navigation icon bar is a fundamental component that enhances the user experience by providing an intuitive way to navigate through a website. In this article, we will guide you through the process of creating a sleek and functional navigation icon bar using HTML and CSS.

Step 1: Setting Up Your HTML Structure

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

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

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.