Hi All,
EDIT: question updated, ignore this OP and see my latest post please, help REALLY appreaciated
I am looking to add a logo to my nav bar and have it positioned correctly however the image stays the same as its original size, what is the best practice to get the img to be as big (height) as the nav bar and to rezise to fit?
Edit: also - when following this tutorial I am applying the hover to the a elements but when I hover its only giving a background color that surrounds the text, not the whole div or section if that makes sense?
HTML:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="flexbox.css">
<title>Document</title>
<div class="topNav">
<img src="/euca.png"><a class="active" href="#">Home</a>
<a href="#">Products</a>
<a href="#">Contact</a>
<a href="#">About</a>
</div>
This is my css:
.topNav {
background-color: lightgreen;
overflow: hidden;
}
.topNav a {
float: left;
color: grey;
margin: 20px;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
.topNav a:hover {
background-color: green;
}
.topNav img {
float: left;
max-width: 40px;
margin-right: 30px;
margin-left: 10px;
margin-top: 3px;
align-items: center;
}
Thanks!