CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
gema
gema

Reputation: 116

Bootstrap 3 navbar-fixed-top stay fixed in mobile view

This may be a bug or just my bad coding. I've built a website using twitter bootstrap 2.3.* and found no problem, especially for the responsive function. The problem came up when I tried to switch into bootstrap 3.RC-2 which was latest stable release (according to Wikipedia). I have also tried with the examples contained in the download, and had the same result when I tried to resize the viewport.

Please have a look at http://bootply.com/69863 for the example, and try to resize window browser then click render view, and try to expand menu and scroll the page.

My real question is how do I make the fixed navbar static when in mobile (collapsible) view?

Upvotes: 10

Views: 50983

Answers (4)

Shikha Dev
Shikha Dev

Reputation: 247

For responsive and fixed navbar use this piece of code:

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            
          <button type="button"class="navbar-toggle collapsed" data-toggle="collapse" data-target="ID-name or class_name" aria-expanded="false">
               <span class="sr-only">toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
              </button>

Then wrap your code under this div...

    <div class="collapse navbar-collapse" id="ID name or class name">
    ...
    </div>

NOTE- *ID name or Class name should be same in both the places

    For id= "# id_name"
    For className  id=".class_name"

Upvotes: 0

Martha
Martha

Reputation: 1

@media (max-width: 767px){

    .navbar-fixed-top {
        position: relative;
        top: auto;/* Auto position navbar top */
    }

    .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
        max-height:inherit;/* Clear max-height */
    }

    body{
        padding:0px;/* No padding */
   }
}

Upvotes: -3

DarkScrolls
DarkScrolls

Reputation: 621

Additionally to what Bass Jobsen has mentioned, for a better usability on mobile, the following CSS snippet removes the "sub-scrolling" on the navigation bar and removes the top margin which is there due to the large screen fixed navbar:

@media (max-width: 767px) {
    .navbar-fixed-top {
        position: relative;
        top: auto;
    }
    .navbar-collapse {
        max-height: none;
    }
    body {
        margin: 0;
    }
}

Upvotes: 15

Bass Jobsen
Bass Jobsen

Reputation: 49044

.navbar-fixed-top keeps the navbar fixed top for all screen sizes now. This will be the default. When you take a look at navbar.less you will see no media queries are applied on this class too.

To make the navbar static after the collapse add the css shown below after the Boostrap CSS:

@media (max-width: 767px) /* @grid-float-breakpoint -1 */
{
    .navbar-fixed-top
    {
    position: relative;
    top: auto;
    }
}

Upvotes: 18

Related Questions