How to add an image on the navigation bar in HTML?
January 31, 2023Hi 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
- Create a
<nav>element that helps us to make navigation bar in html - 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.
Try the below codesandbox link to customize the above example as per your requirement.
All the best 👍