CODEWITHSUNDEEP
csstwitter-bootstrap
GeekedOut
GeekedOut

Reputation: 17185

top nav bar blocking top content of the page

I have this Twitter Bootstrap code 

  <div class='navbar navbar-fixed-top'>
    <div class='navbar-inner'>
      <div class='container'>
        <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </a>
        <div class='nav-collapse'>
          <ul class='nav'>
            <li class='active'>
              <a href='some_url'>My Home</a>
            </li>
            <li>
              <a href='some_url'>Option 1 </a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

But when I am viewing the beginning of the page, the nav bar is blocking some of the content that is near the top of the page. Any idea for how to make it push down the rest of the content lower when the top of the page is viewed so that the content isn't blocked by the nav bar?

Upvotes: 329

Views: 306492

Answers (20)

Afsan Abdulali Gujarati
Afsan Abdulali Gujarati

Reputation: 1614

You can use .stick-top which would do the same job of fixing the navbar to the top when scrolled without having to add any css padding

<div class="container-fluid mt-3">
  <nav class="navbar navbar-expand-sm bg-white navbar-light sticky-top pt-0">
    <a class="navbar-brand" href="/">
      <img src="/images/logo-full.png" alt="logo" width="150">
    </a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="/">Home</a>
      </li>
    </ul>
  </nav>
  <div class="row">
     .....
  </div>
</div>

Upvotes: 0

Sebastian Viereck
Sebastian Viereck

Reputation: 5887

you should add 

#page {
  padding-top: 65px
}

to not destroy a sticky footer or something else

Upvotes: 1

imcoder
imcoder

Reputation: 1

Add this:

.navbar {
  position: relative;
}

Upvotes: 0

Martijn Burger
Martijn Burger

Reputation: 7543

The bootstrap v4 starter template css uses:

body {
  padding-top: 5rem;
}

Upvotes: 9

Ultroman the Tacoman
Ultroman the Tacoman

Reputation: 652

EDIT: This solution is not viable for newer versions of Bootstrap, where the navbar-inverse and navbar-static-top classes are not available.

Using MVC 5, the way I fixed mine, was to simply add my own Site.css, loaded after the others, with the following line: body{padding: 0}

and I changed the code in the beginning of _Layout.cshtml, to be:

<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            @if (User.Identity.IsAuthenticated) {
                <div class="top-navbar">

Upvotes: 2

boatcoder
boatcoder

Reputation: 18107

The best solution I've found so far, that does not involve hard coding heights and breakpoints is to add an extra <nav... tag to the markup.

<nav class="navbar navbar-expand-md" aria-hidden="true">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>

By doing it this way the @media breakpoints are identical, the height is identical (provided your navbar-brand is the tallest object in the navbar but you can easily substitute another element in the non fixed-top navbar.

Where this fails is with screen readers which will now present 2 navbar-brand elements. This points at the need for a not-for-sr class to prevent that element from showing up for screen readers. However that class does not exist https://getbootstrap.com/docs/4.0/utilities/screenreaders/

I've tried to compensate for the screen reader issue with aria-hidden="true" but https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ seems to indicate this will probably not work when the screen reader is in focus mode which is of course the only time you actually need it to work...

Upvotes: 2

cottonova
cottonova

Reputation: 11

Add to your JS:

jQuery(document).ready(function($) {
  $("body").css({
    'padding-top': $(".navbar").outerHeight() + 'px'
  })
});

Upvotes: 0

BradDaley
BradDaley

Reputation: 1

you can set margin based on screen resolution

@media screen and (min-width:768px) and (max-width:991px) {
body {
    margin-top:100px;
}

@media screen and (min-width:992px) and (max-width:1199px) {
  body {
    margin-top:50px;
  }
}

body{
  padding-top: 10%;
}

#nav{
   position: fixed;
   background-color: #8b0000;
   width: 100%;
   top:0;
}

Upvotes: -2

Michael Cole
Michael Cole

Reputation: 16217

Two problems will happen here:

  1. Page load (content hidden)
  2. Internal links like this will scroll to the top, and be hidden by the navbar:
<nav>...</nav>              <!-- 70 pixels tall -->
<a href="#hello">hello</a>  <!-- click to scroll down -->
<hr style="margin: 100px">
<h1 id="hello">World</h1>   <!-- Help!  I'm 70 pixels hidden! -->

Bootstrap 4 w/ internal page links

To fix 1), as Martijn Burger said above, the bootstrap v4 starter template css uses:

body {
  padding-top: 5rem;
}

To fix 2) check out this issue. This code mostly works (but not on 2nd click of same hash):

window.addEventListener("hashchange", function() { scrollBy(0, -70) })

This code animates A links with jQuery (not slim jQuery):

  // inline theme global code here
  $(document).ready(function() {
    var body = $('html,body'), NAVBAR_HEIGHT = 70;
    function smoothScrollingTo(target) {
      if($(target)) body.animate({scrollTop:$(target).offset().top - NAVBAR_HEIGHT}, 500);
    }
    $('a[href*=\\#]').on('click', function(event){
      event.preventDefault();
      smoothScrollingTo(this.hash);
    });
    $(document).ready(function(){
      smoothScrollingTo(location.hash);
    });
  })

Upvotes: 2

gtrak
gtrak

Reputation: 5676

For bootstrap 3, the class navbar-static-top instead of navbar-fixed-top prevents this issue, unless you need the navbar to always be visible.

Upvotes: 151

Eldiyar Talantbek
Eldiyar Talantbek

Reputation: 772

with navbar navbar-default everything works fine, but if you are using navbar-fixed-top you have to include custom style body { padding-top: 60px;} otherwise it will block content underneath.

Upvotes: 2

Akuta
Akuta

Reputation: 3340

Add to your CSS:

body { 
    padding-top: 65px; 
}

From the Bootstrap docs:

The fixed navbar will overlay your other content, unless you add padding to the top of the body.

Upvotes: 296

Abhilash
Abhilash

Reputation: 2953

using percentage is much better solution than pixels.

body {
  padding-top: 10%; //This works regardless of display size.
}

If needed you can still be explicit by adding different breakpoints as mentioned in another answer by @spajus

Upvotes: 4

Jason Butler
Jason Butler

Reputation: 646

I've had good success with creating a dummy non-fixed nav bar right before my real fixed nav bar.

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

The spacing works out great on all screen sizes.

Upvotes: 9

web fan
web fan

Reputation: 1

<div class='navbar' data-spy="affix" data-offset-top="0">

If your navbar is on the top of the page originally, set the value to 0. Otherwise, set the value for data-offset-topto the value of the content above your navbar.

Meanwhile, you need to modify the css as such:

.affix{
  width:100%;
  top:0;
  z-index: 10;
}

Upvotes: 0

catsky
catsky

Reputation: 1203

a much more handy solution for your reference, it works perfect in all of my projects:

change your first 'div' from

<div class='navbar navbar-fixed-top'>

to

<div class="navbar navbar-default navbar-static-top">

Upvotes: 64

PiersB
PiersB

Reputation: 151

In my project derived from the MVC 5 tutorial I found that changing the body padding had no effect. The following worked for me:

@media screen and (min-width:768px) and (max-width:991px) {
    body {
        margin-top:100px;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    body {
        margin-top:50px;
    }
}

It resolves the cases where the navbar folds into 2 or 3 lines. This can be inserted into bootstrap.css anywhere after the lines body { margin: 0; }

Upvotes: 9

Aram Paronikyan
Aram Paronikyan

Reputation: 1608

I am using jQuery to solve this problem. This is the snippet for BS 3.0.0:

$(window).resize(function () { 
    $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});

$(window).load(function () { 
    $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);        
});

Upvotes: 17

Nabil Kadimi
Nabil Kadimi

Reputation: 10394

As seen on this example from Twitter, add this before the line that includes the responsive styles declarations:

<style> 
    body {
        padding-top: 60px;
    }
</style>

Like so:

<link href="Z/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
    body {
        padding-top: 60px;
    }
</style>
<link href="Z/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />

Upvotes: 4

Spajus
Spajus

Reputation: 7406

Adding a padding like that is not enough if you're using responsive bootstrap. In this case when you resize your window you'll get a gap between top of the page and navbar. A proper solution looks like this:

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

Upvotes: 386

Related Questions