CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
yinkouya
yinkouya

Reputation: 93

Large space between navbar brand and navbar menu using bootstrap

I added a picture in navbar brand, and I don't know how to remove the space between it and the following navbar menu. Unnecessary space in red circle.enter image description here

Here is my html:

a.navbar-brand {
  height: 48;
  width: 64;
  display: inline-block;
  padding: 1px 0;
}

.collapse.navbar-collapse {
  padding: 1px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="https://yinkouya.github.io/"><img src="img/name.png" alt="name" height="48" width="64" border="0"> </a>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
      <a class="nav-link" href="#">Code<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="category/jekyll/index.html">Life</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="README.md">About</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Hello World">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Do you have any ideas why the white space is there and how should I remove it? Thank you.

Upvotes: 1

Views: 1514

Answers (1)

J. Knight
J. Knight

Reputation: 131

Your problem stems from the fact that you are setting a flat 50% width to all objects with type img.

I found this code in your CSS which is directly affecting the image

div img { width: 50%; margin: auto; }

I would move this to either id based or class based styling to avoid applying it to absolutely everything on your site.

Hope you manage to fix it and get it displaying the way you like.

Upvotes: 1

Related Questions