Reputation: 1092

Space between navbar and the content

I want to get rid of space between the content and my navbar how can i do it? Give me idea how to do this please im new to css and html. I also tried it to the wordpress on image slider there are space between the navbar and the image slider how caan i get rid of it? Thankyou in advance.

here is my html code for navbar and the content.

  <nav class="navbar navbar-default navbar-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
            <span class="icon-bar" ></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>  
        </button>
        <img class="img-responsive" src="images/brandz.png" >
    </div>

<div class="collapse navbar-collapse" id="nav-collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Students</a></li>
        <li><a href="#">Faculty</a></li>
        <li><a href="#">Contact us</a></li>

    </ul>

    <ul class="nav navbar-nav navbar-right">
                <li><a data-toggle="modal" href="#myModal" ><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                <!-- Modal -->
                    <div id="myModal" class="modal fade" role="dialog">
                        <div class="modal-dialog">
                <!-- Modal content--> 
                         <div class="modal-content">
                             <div class="modal-header"> 
                                 <button type="button" class="close" data-dismiss="modal">&times;</button>
                             </div>
                             <div class="modal-body">
                                <p>Some text in the modal.</p>
                             </div>
                             <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                             </div>
                         </div>
                        </div>
                   </div>
    </ul>
  </div>
  </div>
  </nav>
  <div class="content">
 Pellentesque habitant morbi tristique senectus et netus et malesuada fames     ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor   sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
     </div>

here is my css

 .navbar-default .navbar-nav > li > a {
 font-weight: 590;
 color: #949494;
 display: block;
 padding: 5px 35px 2px 45px;
 border-bottom: 3px solid transparent;
 line-height: 97px;
 text-decoration: none;
 transition: border-bottom-color 0.5s ease-in-out;
 -webkit-transition: border-bottom-color 0.5s ease-in-out; 
  }
.navbar-default{
background-color:#fff;

}
  .nav>li>a {
  position: relative;
  }
 .navbar-default .navbar-right > li > a {
 padding-left: 70px;
 padding-right: 1px;
 }
.navbar-default .navbar-toggle .icon-bar {
 background-color: #000000;
 margin:0 0 4px;
 width: 25px;
 height: 5px;

}
@media (max-width: 768px) {
.img-responsive{
 width: 300px;
 height:50px;
 padding-left:50px;
 }
 }
 @media (max-width: 376px) {
 .img-responsive{
 width: 220px;
 height:50px;
 padding-left: 20px;
}
}
@media (max-width: 286px) {
.img-responsive{
 width: 180px;
 height:50px;
 padding-left: 5px;
}
}
 .nav.navbar-nav > li{
 display: :inline-block;
  }
 .nav.navbar-nav{
  list-style-type:none;
  }
  .nav.navbar-nav > li > a:hover{
  color:#a92419;
  border-bottom-color: #a92419;
  }

.navbar-default .navbar-toggle .icon-bar {
 background-color:#a92419 ;
 margin:0 0 4px;
 width: 25px;
 height: 5px;

 }
 .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover            {
 background: none;
 }
 button.navbar-toggle{
 background:none;
 border:none;
 color:#000;

 }

Upvotes: 3

Answers (6)

Garry

Reputation: 1341

In bootstrap 4, a new class of mb-3 is added to the navbar (see last class)

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">

Which adds a Margin Bottom. See this answer for more details. I just removed that class.

Upvotes: 2

Vedha Peri

Reputation: 1466

For me, the space was caused because of <h1> tag. I then changed <h1> to a <p> tag and changed the font size. This helped me get rid of the space between the navbar and page content.

Upvotes: 0

user214936

Reputation: 19

Ok, for ANYONE ELSE who might but searching for a possible answer. I didn't necessarily solve the problem exactly the way I wanted and I'm sure there's other solutions but for me this is what worked:

1) Go to Appearance > Editor

2) Click on "Theme Functions"

3) Look for the function called mbe_wp_head() and find lines that look like the one below:

    .'body{ padding-top: 42px !important; }'

and change the padding-top attribute to whatever fits your design.

I know, this might not be the best solution and it might not work for everyone (personally, I'm using the a bootstrap theme) but it worked for me and if I find a better one I'll post it.

Upvotes: 0

Khaled Allen

Reputation: 85

By default, the navbar class has a bottom-margin of 20px. That's what's creating the space beneath the navbar area. You can override this in your own stylesheet. Just add this to your CSS: