Looking to add an image to your website navigation? Want the image to appear at the beginning of the navigation bar, before Link 1? Here's a bit of CSS code for you:
<div class="topnav">
<img src="https://cdn.mos.cms.futurecdn.net/fHBA4cnnUNMz7pet6GVpSe.jpg" alt="logo" width="100" height="100">
<a class=active href="home.html">Homepage</a>
<a href="link.html">Link 1</a>
<a href="link.html">Link 2</a>
<a href="link.html">Link 3</a>
<a href="link.html">Link 4</a>
<a href="link.html">Link 5</a>
</div>
<div style="padding-left:16px">
</div>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: orange;
}
.topnav a {
float: left;
color: #f3f3f3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: red;
color: white;
}
</style>
Need advice on how to position the image at the start of the navigation menu? Thank you in advance for any assistance provided!