CODEWITHSUNDEEP
bootstrap-4navbar
rossmclenny
rossmclenny

Reputation: 37

How to make navbar branding image be responsive and fit navbar

First post, second week of learning! (nervous poster here!)

I want to make my navbar brand image fit the navbar and also be responsive. At the moment the logo image is very large and when i preview on large server it shows as almost a whole page. 

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
    <div class="container">
      <a class="navbar-brand" href="index.html">
            <img src="img/logo.png" alt="LM sport injury therapy">
          </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home
                  <span class="sr-only">(current)</span>
                </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Upvotes: 1

Views: 1223

Answers (1)

Luuk Skeur
Luuk Skeur

Reputation: 1940

welcome to the forum ;)

First of all try including a jsfiddle for others to play around in and fix your problem sooner.

The problem is that the image probably isn't limited in your code. The image can get as big as the original width and height. You can set a max-height in CSS to stop the logo from becoming too big (or uploading a smaller one).

Like so:

.navbar img {
  max-height: 60px;
}

Working demo: https://jsfiddle.net/vc9n1sqb/

Upvotes: 2

Related Questions