Trying to resize my logo & add a title to the side of the logo without resizing the navbar

Question

I'm trying to resize my logo & add a title to the side of the logo without resizing the navbar. What the current navbar looks like

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:

This is the navbar after applying your code. The logo is still the same size for some reason. I would like it to be bigger but not change the height of the navbar.

enter image description here

EDIT: I did as suggested & my logo fits into the navbar, thank you! I added width & played around with the height & width.

#header-img {
  position: absolute;
  height: 160px;
  width: 250px;
}

Current navbar

Answer 1

I didn't quite understand your question but I think you need to move the logo to the right side a bit without affecting the size of the navbar. Or maybe you want to resize the logo but without affecting the navbar. So this solution works for both problems.

#nav-bar {
left: 58%;
position: absolute;
margin-top: 30px; }

Answer 2

Based on my assumption of what your provided code lacked. I built your navbar like the following snippet, I hope it will help you somehow.

Basically, my solution used flexbox applied to the header in order to let elements of header to display in row. then using align-items: center to vertically align and justify-content: space-between to create a space between the logo and the navabr.

Edit: refer to this link to playaround: https://codepen.io/DohaHelmy/pen/xxbzzRN

I tried to re-position the logo and added a name next to it. also consider removing margin-top added to the header as it is just set to show the effect properly.

For better display of the result run the snippet using full page

 header { margin-top: 50px; display: flex; align-items: center; justify-content: space-between; position: fixed; background-color: #ffaa63; color: white; font-family: "Exo 2", sans-serif; padding: 1em; width: 100%; } #logo{ display: flex; align-items: center; font-size: 35px; position: relative; } #logo span{ position: relative; left: 220px; } #header-img { position: absolute; height: 120px; } #nav-bar ul { position: relative; right: 50px; list-style-type: none; overflow: auto; } #nav-bar ul li { float: left; margin: 0px 20px; color: #fff; } #nav-bar .nav-link { color: #000; text-decoration: none; }

 <header id="header"> <div id="logo"> <img src="https://www.freepnglogos.com/uploads/eagles-png-logo/eagle-sports-png-logos--0.png" alt="logo" id="header-img"> <span>Logo name</span> </div> <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> </header>