CODEWITHSUNDEEP
csstwitter-bootstrapnavbar
derhen123
derhen123

Reputation: 21

Remove space under navbar (Bootstrap)

I'm trying to remove the space between my navbar and a picture I've got under the menu.

I've tried to play around with margin-top/margin-bottom Also I have tried to edit .navbar{margin-bottom: 20px;} in bootstrap.min.css which didn't help either.

My HTML code looks like this 

    <div class="col-sm-3">
        <div class="logo"><a href="Index.php"> <img src="http://localhost/wordpress/wp-content/themes/Greenterapi/Pics/Logo.png" alt="Home" width="200px" height="74px"></a></div>
    </div>

    <div class="col-sm-9">
        <nav class="navbar navbar-static-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <div class="btn btn-primary">Menu</div>
                    </button>

                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="Index.php">Home</a></li>
                        <li><a href="Om.php">Om mig</a></li>
                        <li><a href="Coaching.php">Coaching</a></li>
                        <li><a href="Psykoterapi.php">Psykoterapi</a></li>
                        <li><a href="Zoneterapi.php">Zoneterapi</a></li>
                        <li><a href="Erhverv.php">Erhverv</a></li>
                        <li><a href="Priser.php">Priser</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav> </div>


    </div>






<!--Row with 1 column in 1:1 ratio-->
<div class="row">
    <div class="col-sm-12">
            <div class="Header"><img src="http://placehold.it/1140x250"></div>
    </div>

</div>

I have not got any css code that effects the menu, or the picture, except for this

ul.nav a:hover { background-color: #555; color: #030303 !important; }

I hope your able to help, I'm out of ideas.

Edit http://codepen.io/anon/pen/vOMRGV as per request

Edit 2 Seems like it's working with the use of a br tag and margin-bottom thanks for the help everyone.

Upvotes: 2

Views: 4154

Answers (3)

vanburen
vanburen

Reputation: 21663

This may help.

body {
  background-color: #ECECEA;
}
div.haj {
  background-color: #ff390d;
}
div.InfoTekst,
div.Info {
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 5px;
  margin-top: 20px;
  min-height: 100px;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.5);
}
ul.nav a:hover {
  background-color: #555;
  color: #030303 !important;
}
.navbar.navbar-static-top {
  margin-bottom: 0px;
  padding-right: 15px;
}
.navbar.navbar-static-top,
.navbar-nav li a {
  height: 74px;
}
#brand-logo {
  background-size: contain;
  position: absolute;
  min-width: 200px;
}
#brand-logo img {
  width: 100%;
  height: 74px;
}
.navbar-static-top .navbar-brand {
  display: none;
}
@media (max-width: 768px) {
  .navbar-static-top .navbar-nav {
    background: #ECECEA;
  }
  .navbar .navbar-header .navbar-toggle {
    margin-bottom: 0px;
  }
  .navbar-static-top .navbar-nav li a {
    height: auto;
  }
  .navbar.navbar-static-top {
    height: 74px;
    padding-right: 0;
  }
}
#brand-logo img {
  width: 200px;
  height: 74px;
}
@media (max-width: 992px) and (min-width: 768px) {
  .navbar-static-top .navbar-nav li {
    font-size: 11px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-2 col-sm-2">
      <div id="brand-logo">
        <a href="Index.php">
          <img src="http://placehold.it/200x74/555/fff?text=Home" alt="Home" />
        </a>

      </div>
    </div>
    <div class="col-md-10 col-sm-10">
      <nav class="navbar navbar-static-top" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span>

            <div class="btn btn-primary">Menu</div>
          </button>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a z href="Index.php">Home</a>

            </li>
            <li><a href="Om.php">Om mig</a>

            </li>
            <li><a href="Coaching.php">Coaching</a>

            </li>
            <li><a href="Psykoterapi.php">Psykoterapi</a>

            </li>
            <li><a href="Zoneterapi.php">Zoneterapi</a>

            </li>
            <li><a href="Erhverv.php">Erhverv</a>

            </li>
            <li><a href="Priser.php">Priser</a>

            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
  <!--Row with 1 column in 1:1 ratio-->
  <div class="header">
    <img src="http://placehold.it/1140x250/f00/fff" class="img-responsive">
  </div>
  <!--Row with two columns divided in 1:3 ratio-->
  <div class="row">
    <div class="col-sm-9">
      <div class="row">
        <div class="col-sm-12">
          <div class="InfoTekst">
            <p>
              <h3>Velkommen til Green Terapi</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
              aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
        <div class="col-sm-12">
          <div class="InfoTekst">
            <p>
              <h3>Coaching</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
              aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
        <div class="col-sm-12">
          <div class="InfoTekst">
            <p>
              <h3>Psykoterapi</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
              aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
        <div class="col-sm-12">
          <div class="InfoTekst">
            <p>
              <h3>Zoneterapi</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
              aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3 text-center">
      <div class="Info">
        <p>
          <p class="Billede">
            <img src="http://localhost/wordpress/wp-content/themes/Greenterapi/profile.jpg" alt="Logo" style="width:160px;height:160px">
          </p>
          <h5>
                    Coach
                </h5>

          <h5>
                    Psykoterapeut
                </h5>

          <h5>
                    Zoneterapeut
                </h5>

          <p>Jeanette Green</p>
          <p>Tlf.: 22 11 26 39</p>
          <br>
          <p> <b>
                        [email protected]
                    </b>

          </p>
          <p>Motion & Sundhedshuset
            <br>Egedal 15
            <br>2690 Karlslunde</p>
        </p>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Michael
Michael

Reputation: 2046

Here's a working version: http://codepen.io/anon/pen/ZGZxOB. Looks like it has to be something else later on in the CSS that is resetting the margin-bottom setting back to 20px, if you did still see the gap after changing the margin in bootstrap's CSS.

You should use the element inspector in any major browser by pressing F12 on the keyboard. Then you can inspect the element and look at all the CSS rules that are affecting that .navbar.

Upvotes: 3

user1263254
user1263254

Reputation:

You may want to check the default settings for ul and a. Probably has margin, padding, which you'd need to override for the navbar section.

Upvotes: 0

Related Questions