How to add an image on the navigation bar in HTML?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

we have created a navigation bar in html, with help of <nav> tag, <img> tag, and CSS class.

Today, I am going to show you. how to add an image on the navigation bar in HTML with code example.

Table of contents

  • Includes bootstrap view
  • Define its css class
  • Example of add an image on the navigation bar in html

This article will guide you to add an image on the navigation bar in html with an example.

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Step 2: Define its css class

To add an image on the navigation bar in HTML, we will need the below CSS, which is used to nav class and ul li, ul li a:hover to make the navigation bar.

{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: #6194d5;
  justify-content: space-between;
  overflow: auto;
}
ul li {
  position: relative;
  margin: 0 20px;
  list-style: none;
  display: inline-block;
  padding: 14px;
  font-size: 17px;
}
ul li a{
text-decoration: none; 
cursor: pointer;
color: rgb(255, 255, 255);
}
ul li a:hover {
   background-color: rgb(129, 123, 123);
}

Example of add an image on the navigation bar in html

In this example, we will do the following things

  1. Create a <nav> element that helps us to make navigation bar in html
  2. Add a <img src="image/sample-logo-removebg-preview.png"/> included to make image in navbar.

Let’s look at the following example to understand how it works:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: #6194d5;
  justify-content: space-between;
  overflow: auto;
}
ul li {
  position: relative;
  margin: 0 20px;
  list-style: none;
  display: inline-block;
  padding: 14px;
  font-size: 17px;
}
ul li a{
text-decoration: none; 
cursor: pointer;
color: rgb(255, 255, 255);
}
ul li a:hover {
   background-color: rgb(129, 123, 123);
}
    </style>
  </head>
  <body>
    <nav>
    <img src="image/sample-logo-removebg-preview.png" width="60px" height="40px" id=logo alt="Logo image" style="margin-left: 10px;" />
      <ul class="navigationbar">
        <li><a href="index.html">Home</a></li>
        <li><a href="music.html">Music</a></li>
        <li><a href="news.html">News</a></li>
      </ul>
    </nav>
  </body>
</html>

Check the output of the above code example.

Html, navigation, bar

Try the below codesandbox link to customize the above example as per your requirement.

Try it Yourself

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts