44224

How to Force Bootstrap Navbar Fix To Top Push Down(slide) Elements Under

As you can see at This Demo Bootstrap 3 Navbar Fixed to Top is not behaving like regular navbras on sliding down elements which are after the navbar in small screens. Instead it is overlaying the navbar on top of content elements. Now can you please let me know if there is a way to force fix navbar also acts like regular navbars on pushing the content down and up on sliding?

Thanks

Answer1:

Alright, so you can kind of get it to do what you want, but allow me to show you why doing this is honestly a bad idea because <strong>in the end it's just pointless.</strong>

The following answer will use the snippet bellow for refference. You may need to view it full screen which means you may also need to adjust he width of your browser window to get the collapsed nav to show up.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(function() {
  $('button.navbar-toggle').click(function() {
    var value = $('body').css('padding-top');
    if (value === '70px') {
      $('body').css('padding-top', '+=235');
    } else {
      $('body').css('padding-top', '70');
    }
  });
});
body {
  padding-top: 70px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Panel heading without title</div>
    <div class="panel-body">
      Panel content
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">Panel heading without title</div>
    <div class="panel-body">
      Panel content
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">Panel heading without title</div>
    <div class="panel-body">
      Panel content
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
      Panel content
    </div>
  </div>

</div>


The bit of jQuery at the top is what you can use to adjust the 'padding-top' value of your body element.

Initially, per the official Bootstrap documentation regarding fixed navbars, you have to add a padding-top of 70px to your page's body tag, so the navbar doesn't overlap the page content. As such, to get the page content to move down when you're at the top of the page you have to adjust this padding to fit based on your nav.

But this is where things start to get a little pointless.

When you're at the very top of your page content, it gets pushed down and looks kind of okay, similar to the normal Bootstrap navbar:

<img src="https://i.stack.imgur.com/SlouG.png" alt="enter image description here">

However, scroll down about halfway so your body content is now under your navbar and expand the nav again. You get this slight little jump with the content which really <strong>doesn't do anything useful for the user.</strong>

The fixed navbar is for when you want your nav to always be visible no matter where you are in scrolling your page, which means on mobile sites it has to hover over the content of your page when expanded. <strong>Given this, having the body content of your page pushed down when you expand a fixed Bootstrap navbar in mobile view is really quite pointless.</strong>

I've provided an answer in case you or anyone else really needs some kind of solution, maybe due to a manager or client that insists on having this type of functionality, but I simply wanted to point out how pointless it really is, that way you might explain it to them as well, possibly at your own risk. :P

Answer2:

The key to pushing down content on mobile devices was to add the "navbar-static-top" to .navbar:

if(screen.width >= 768) { $('.navbar').addClass('navbar-fixed-top'); $('body').css("padding-top", 128); } else { $('.navbar').removeClass('navbar-fixed-top navbar-fixed').addClass("navbar-static-top"); $('body').css({"padding-top": 0, "margin-top": 144}); }

Recommend

  • How to send uploaded file(s) via HttpPostedFileBase along with a ViewModel?
  • How to fix unexpected column order in bootstrap 4?
  • Error: Bootstrap's JavaScript requires jQuery
  • Backbone not defined with require js
  • how to make directive in angular of owl carousel?
  • How to split an image responsive into two div blocks using css?
  • in this page hover is not working i dont know why and also footer is not taking 100% width even thou
  • Using target on div without a href
  • sending email using “bcc” without “to” in java application
  • Random access image (picture) file
  • How to display the hotel names that have the maximum count from data base by calculating sum in PHP?
  • how to add semantic ui in a rails app?
  • Why are views not counted if you embed a youtube iframe dynamically using jquery?
  • NetBeans doesn't see style.css [duplicate]
  • Jquery Show & ScrollTop (or ScrollTo)
  • Bootstrap Popover showing at wrong place upon zoom in/out or resizing Browser window
  • How to add regEx in angular filter
  • Responsive Form on top of Responsive Image? - Bootstrap
  • Angular Bootstrap Carousel Slide Transition not working correctly
  • Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)
  • Uncaught TypeError: $(…).select2 is not a function
  • Python pickle not one-to-one: different pickles give same object
  • How to view images from protected folder with php?
  • D3 get axis values on zoom event
  • Adjust width of select element according to selected option's width
  • Display images in Django
  • Custom validator control occupying space even though display set to dynamic
  • JSON response opens as a file, but I can't access it with JavaScript
  • Jquery UI tool tip close icon
  • DomPDF {PAGE_NUM} not on first page
  • Javascript simulate pressing enter in input box
  • Resize panoramic image to fixed size
  • Importing jscolor library in angular 2
  • bootstrap to use multiple ng-app
  • A cron job substitute?
  • apache spark aggregate function using min value
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?