My logo isn't fitting into the nav-bar

Question

The whole bootstraps thing is killing me. I'm so lost on this subject if there's anyone who can help me out on this, I'll be really thankful.

Sorry that my style sheet can't connect to this website.

My nav-bar looks like this but it should look like this

I truly hope you can help me get out of this mess!

* {
  font-family: 'Oxygen', sans-serif;
  background-color: maroon;
}


/** Header **/

#header-nav {
  background-color: #f6b319;
  border-radius: 0;
  border: 0;
}

#logo-img {
  background: url('../images/flying-cat.png') no-repeat;
  width: 150px;
  height: 150px;
  left: 15px;
  background-size: contain;
  margin: 10px 10px 10px 10px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="navbar-brand">
            <div id="logo-img"></div>
          </a>
        </div>
      </div>
    </nav>
    </div>
    </div>
    </nav>
  </header>
</body>
</html>

Please refrain from using foul language on Stack Overflow - both because we endeavour to keep this site as professional as possible, and also because such language can cause overzealous company webfilters to block access. — Scoots, May 03 '18 at 16:29

Felipe Warrener-Iglesias · Answer 1 · 2018-05-03T16:41:40.860

The image doesn't fit because you've set it to be an absolute size, which is larger than the nav-bar. Your CSS class logo-img contains height: 150px which makes it break out of the nav-bar. Set a lower height property so that it fits within the nav-bar.

You've also used a div inside that navbar-brand div which isn't necessary and is causing problems, even in bootstrap boiler plates the navbar-brand image is an image element within that div. Put an image tag inside that navbar-brand div, specify a width and specify a height of auto so that it scales within its boundaries.

Here is the way it is done in Bootstrap examples, you will need to tweak this when using your own image source though.

Edit your navbar-header HTML so it looks like this:

<div class="navbar-header">
      <a href="index.html" class="navbar-brand">
        <img src="https://placeholdit.co//i/555x150"></a>
</div>

Add the following rule to your CSS:

.navbar-brand {
    padding: 10px;
}

score 0 · Answer 2 · answered May 03 '18 at 16:41

The problem was the unnecessary styling that bootstrap applies.

So

You'll need to set your Header to fixed height, Then set the div with the background to a height within the header's height for a logo it's should be problematic in the long run, In case of making the website responsive.

I made a somewhat close to what you need demo, take it from there to your desired design.

* {
  font-family: 'Oxygen', sans-serif;
  margin:0;padding:0;
}

header{
  height: 100px;
}
#header-nav {
  background-color: #f6b319;
  border-radius: 0;
}
#header-nav,.container,.navbar-header,.navbar-brand{height: 100%;}

#logo-img {
  background: url('4.png') no-repeat;
  display:inline-block;
  width:80px;
  border:1px solid;
  height: 80px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="navbar-brand">
            <div id="logo-img"></div>
          </a>
        </div>
      </div>
    </nav>
    </div>
    </div>
    </nav>
  </header>
</body>
</html>

My logo isn't fitting into the nav-bar

2 Answers2