Twitter Bootstrap Question posted in

My logo is blurry on the navbar, looks small on desktop view – Twitter bootstrap

I am using Twitter Bootstrap on my website and have uploaded a high resolution version of my logo. The logo size is 529 x 100 pixels and this is what’s in my CSS:

.navbar-brand {
    float: left;
    padding: 12px 15px;
    font-size: 19px;
    line-height: 21px;
    height: 62px;
    max-width: 200px;
    display: table;
}
Tags:

2

Answers


  1. 0

    I had the same issue. The problem that usually causes it is the padding. I tried to move the padding to the .navbar class and it works now. Try to remove the padding and see if that works. If yes, then try to find a better place (outer container maybe?) to place the padding or perhaps margin.

    Login or Signup to reply.
  2. 0

    I see that this is quite an old thread, but wanted to answer anyway. I was facing the same issue using Bootstrap 5.1.

    <nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    </a>
  </div>
</nav>

    I just needed to adjust the ratio of my logo and modify from the default Bootstrap setup. I modified it to width="117" height="21"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search