'There is white space after my Navbar? How to delete it?

This is my Navbar.

<div class="navbar navbar-default">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" id="Logo" href="/">xxxx</a>
    </div>

    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
        <li><a href="www.pinkman-translations.com/Sprachen">Sprachen</a>
        </li>
        <li><a href="#">Kontakt</a>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="xxxx"><i class="fa fa-phone fa-lg"></i>xxxx</a>
        </li>
      </ul>
    </div>

  </div>
</div>

After this, I set up a Section, but the problem is between the Navbar and the Section there is some white space. I would like the Section to start right after the Navbar or even better the Navbar start at the top of the Section. Any Ideas?

csshtmltwitter-bootstrap


Solution 1:[1]

Bootstrap's .navbar component has a default bottom margin of 20px. You can eliminate this by adding the following CSS to your stylesheet.

.navbar.navbar-default { margin-bottom: 0; }

I would recommend you review Bootstrap's Navbar Documentation as well, as you have a duplicate .navbar class in you unordered list within the .navbar-collapse div.

Solution 2:[2]

Use the following to remove the white space:

overflow: 'hidden'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Robert
Solution 2 Adrian Mole

Related Questions