CODEWITHSUNDEEP
csstwitter-bootstrapnavbar
Grischa
Grischa

Reputation: 80

Adding logo to bootstrap 4 beta navbar

I want to add my logo in the navbar in bootstrap 4 beta framework. The height of the navbar should be the same or nearly the same like the normal height without a logo, like you can see in the first example.

Example without and with logo

<nav class="navbar navbar-expand-md navbar-light" style="background-color: #CECFFF;">
       <a class="navbar-brand" href="/"><img src="logo.png"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item dropdown">
          ....
          </li>           
        </ul>
      </div>
    </nav>

https://codepen.io/anon/pen/gGpJLq

The solutions from another question here are only for bootstrap 4 alpha working.

Upvotes: 2

Views: 3060

Answers (2)

samar taj Shaikh
samar taj Shaikh

Reputation: 1185

<a class="navbar-brand" href="/">
 <img src="https://www.lern-online.net/bilder/logo.png" style="height: 35px; padding: 0 auto;">
</a>

here as you can clearly see i gave an inline styling which you can manually modify further on what you need.

The problem here was that the image which you used was appearing in its defaulting size hence the navigation bar was modifying itself to accomodate it we can avoid this by ensuring the size of our image before-hand.

hope I helped.

Upvotes: 0

Kyle Higginson
Kyle Higginson

Reputation: 942

You could specify the height of the image to ensure it doesn't increase the size of the navbar by adding a class to the img. Like this:

.logo {
  max-height: 40px;
  padding: 0;
}

Upvotes: 3

Related Questions