Bigger logo without affecting other elements in the navbar - html

Question

My main problem is with a logo. Below is my header element where I attached my navbar and logo. The Header contains a background image and in it I placed my navbar.
HTML
<div class="header">
<div class="container">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<a class="navbar-brand" href="#"><img src="images/logo.svg" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse justify-content-end">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
CSS
.navbar-brand > img {
width: 100%;
}
It looks like this:
image
And when I specify width for the logo (like 20em), it becomes bigger but it moves the li items too. I don't want my li items be affected. Plus I want the logo to be responsive when I specify width it still remains the same in smaller screens.
iamge2

Answer 1

I experimented a lot with logo sizes on bootstrap3 navbar.
For me this works best.
First I give the navbar my desired height, and set the li > a line-height to the same height, so the link padding-top and padding-bottom are fixed (links are vertical centered).
.navbar {
min-height: 100px;
}
ul.navbar-nav > li > a {
line-height: 100px;
}
The navbar now is 100px height. With padding in mind my logo should now have a max-height of 80px cause we need 10px padding-top and 10px for padding-bottom. Lets say the logo has a width of 200px and a height of 80px, I give the img the class logo.
<a class="navbar-brand" href="#"><img src="#" class="logo" alt=""></a>
Now keep the padding in mind, I add 10px of padding-top to the logo.
img.logo {
padding-top: 0px;
width: 200px;
height: auto;
}
If you want different logo sizes, just change the navbar min-height/line-height and change the logo width/padding.
Bootstrap 3 fiddle:
https://jsfiddle.net/yghg5hsx/
Bootstrap 4 fiddle:
https://jsfiddle.net/973Lde7j/3/

Answer 2

put your logo inside a div and the rest of the navbar content in another div
then try this:
#navbar { width:100%}
#logoDiv { width:20% }
#contentDiv { width:80% }