0

how can I transform my default navbar

Screenshot of default navbar

into a fixed navbar (when I scroll)

Screenshot of fixed navbar

This is my example Code:

 <div class="navbar navbar-default">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">Brand</a>
                </div>
                <div class="navbar-collapse collapse navbar-responsive-collapse">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Active</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                      <ul class="dropdown-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 class="dropdown-header">Dropdown header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                      </ul>
                    </li>
                  </ul>
                  <form class="navbar-form navbar-left">
                    <input type="text" class="form-control col-lg-8" placeholder="Search">
                  </form>
                  <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                      <ul class="dropdown-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>
              </div>
            </div>

When I insert data-spy="affix" data-offset-top="200" it works, but it doesn't look the way I want it.

Screenshot of my navbar

Should I write another CSS class or is there a simpler solution?

Enrico
  • 10,377
  • 8
  • 44
  • 55
Ckappo
  • 607
  • 1
  • 9
  • 27
  • 1
    I think this is a duplicate of: http://stackoverflow.com/questions/21301316/how-to-bootstrap-navbar-static-to-fixed-on-scroll – Robert Perry Apr 21 '16 at 15:02

2 Answers2

0

My guess: Adding the navbar-fixed-top class will do it.

<div class="navbar navbar-default navbar-fixed-top">
Patron
  • 11
  • 3
  • i don't want to have my navbar at top with full width. I want my navbar looks like in Screenshot 01 and only after scroll (fixed-top) – Ckappo Apr 21 '16 at 14:43
0

To change the CSS of an element when you scroll the page the best way is create another CSS class with all the rules that you need for example:

.navbar-sm {
    background-color:red;
    /*all the rules that you need*/
}

Then add it to the element with JQUERY:

$(document).ready(function () {

$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
        $('.navbar').addClass('navbar-sm');
    } else {
        $('.navbar').removeClass('navbar-sm');
    }
});
if ($(window).scrollTop() > 100) {
    $('.navbar').addClass('navbar-sm');
}

});

There is a working example here: FIDDLE

paolobasso
  • 2,008
  • 12
  • 25