My navbar is not resizing properly when I shrink the logo image. Here's a link to the Codepen page with the full code:
https://codepen.io/gabor-szekely/pen/JeMqQz
I'm trying to reduce the size of the "Sino Medical" logo image in the top left corner to 80% of its original size. However, when I do this, the entire navbar does not shrink along with it, resulting in it being too tall.
Could anyone provide assistance?
Here is the HTML:
<div class="navWrapper">
<nav class="flex-wrapper">
<div class="top-row-logo">
<img class="logo-img" src="https://img1.wsimg.com/isteam/ip/7bf494f1-7493-4549-b272-842b0d021577/logo/345e441d-0495-4f5b-bd62-f6413ac9b7a5.png/:/rs=h:71" alt="Sino Medical Institute">
</div>
<div class="top-row-links">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Register</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
<li>
<a href="#">FAQ</a>
</li>
</ul>
</div>
<div class="login-links">
<ul>
<li>
<a href="#" class="login-button">Login</a>
</li>
</ul>
</div>
</nav>
</div>
And here is the applicable CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
text-align: center;
padding: 0 1.5em;
color: #333;
}
.navWrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.flex-wrapper {
display: flex;
flex-flow: row nowrap;
background-color: white;
border-bottom: 1px solid #c8c8dc;
}
.top-row-logo {
flex: 1;
}
.logo-img {
margin-left: 3.2rem;
height: 80%; /* THIS IS THE ISSUE! */
}
.top-row-links, .login-links {
margin: auto 0;
}
.top-row-links {
flex: 1.5;
margin-right: 3.2rem;
}
.login-links {
margin-right: 4rem;
}
Thank you!