Space between navbar and the content

add space between navbar items
how to give space between navbar elements
bootstrap navbar
bootstrap navbar justify space between
navbar styles
bootstrap navbar space between buttons
gap between navigation bar and view
navbar increase spacing

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;

 }

.navbar-default { margin : 0 !important; }

Space between navigation bar and content, I'm trying to adjust the space between my navbar and my content. On the bottom of the navbar there is 20px of space but I can't adjust it or  Space between navbar and content. Ask Question Asked 11 months ago. Active 11 months ago. Viewed 263 times 1. I'm currently learning some css and html and decided to


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:

.navbar {margin-bottom: 0;}

You could also set a negative margin on the content class, but that's a bit of a hack.

.content {margin-top: -20px;}

Good luck.

I'm trying to adjust the space between my navbar and my content , I am trying to remove a gap between a navbar in a “nav” tag and a “header” tag. With the navbar I am using bootstrap using class “col-lg-3” for  I'm trying to adjust the space between my navbar and my content using Bootstrap I'm trying to adjust the space between my navbar and my content. On the bottom of the navbar there is 20px of space but I can't adjust it or anything?


Try setting the margin to zero on the content class.

Removing gap between Navbar and Header tags, justify-content: space-between; //thats where spaces come from Instead of <div class="navbar></div>" try using a semantic element like  Hey guys! I tried to use display:inline-block; padding-right:50px; for my navigation bar but it didn’t space it out evenly: Here are my codes:


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.

Nav bar link spacing - Programming Help, Gap Between Nav Bar and Top of Page · Curriculum Help And for both pages the navbar html and css are the exact same! See screenshots  If you go to my site - www.sorensenes.com - there is at least an inch of white space between nav bar and the main picture on the page. How can I get rid of that white space and move the picture up


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.

Gap Between Nav Bar and Top of Page - HTML-CSS, But when I run the page, there is empty space between the nav header and page <div class="navbar navbar-inverse navbar-fixed-top"> In keeping with the mobile-first approach of the framework you are working within (bootstrap) it is better to add the padding at widths which can handle it, rather than excluding it at widths which can't. @media (min-width: 992px) { .navbar li { margin-left : 1em; margin-right : 1em; } } improve this answer. answered Sep 1 '15 at 8:38.


How to remove the empty space between Nav header and Content , How can I properly add space between the links in in my navigation bar? Luongo Designs Heres the CSS for the navigation: #nav  Hi I am new in Bootstrap mvc . This is my layout file script. But when I run the page, there is empty space between the nav header and page header. My script is as follows &lt;!DOCTYPE html&gt; &lt


Space between links in navbar? - HTML & CSS, Hello, i just created a navigation bar for testing purposes and there is something to be right next to each other so that there is no gap between them. content="​width=device-width,initial-scale=1.0"> <link rel="stylesheet"  Space between links in navbar? HTML & CSS. cluongo. August 30, 2014, 4:36am #1. How can I properly add space between the links in in my navigation bar? Luongo Designs. Heres the CSS for the


How to remove spaces between navigation bar links?, Bootstrap space between navbar and carousel [duplicate] - css. Due to the Bootstrap 4 navbar being fixed to the top, the content gets placed under it. Is there a  The nav-container div is the navbar itself, ie. the strip that runs across the top of the page. The <nav></nav> tags inside it will contain the actual menu items. We want our nav to stretch across the whole page. So, let's set nav-container width to reflect that.