I need to resize my logo and add a title beside it without affecting the size of the navbar. Here is how the current navbar looks
HTML:
<header id="header">
<img src="logohtml.png" alt="logo" id="header-img">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#"><b>Things to Do</b></a></li>
<li><a class="nav-link" href="#"><b>Where to Eat</b></a></li>
<li><a class="nav-link" href="#"><b>Events</b></a></li>
<li><a class="nav-link" href="#"><b>Hotels</b></a></li>
<li><a class="nav-link" href="#"><b>Parking</b></a></li>
</ul>
</nav>
CSS:
header {
position: fixed;
background-color: #FFAA63;
color: white;
font-family: 'Exo 2', sans-serif;
padding: 1em;
width: 100%
}
header::after {
clear: both;
content: '';
display: table;
}
#header-img {
width: 90px;
height: 50px;
float: left;
padding-top: 1.7em;
}
EDIT:
After applying the suggested code, the logo remains the same size. I want it larger without changing the navbar height.
View updated navbar image here
EDIT: I followed the advice given and successfully resized my logo to fit in the navbar. Thank you! I adjusted the width and played around with the height and width values.
#header-img {
position: absolute;
height: 160px;
width: 250px;
}