How to have two different types of navigation bar one fixed and one static with different menu items?

Question

How can we have fixed navigation bar having same behaviour like this on website https://ooomf.com/ and also with two different type of menu items.

For example on the website above they have stories, how it works , blog and login at the top menu and when you scroll down in fixed menu "login" gets replaced with "start your project" button.

How do we accomplish that using css/jquery in bootstrap 3 ?

Help would be appreciated.

Thank you.

Answer 1

Here is an example with 2 navbars. The affix component is used to pin the 2nd navbar to the top once the user has scrolled past the top header. You can use CSS z-index to position the 2nd navbar over the first...

http://www.bootply.com/118680

#topNav {
    z-index:-1;
}

#nav {
  width: 100%;
  position:static;
  top:-32px;
}

#nav.affix {
   position: fixed;
   top: 0;
   z-index:10;
   -webkit-transition: all .6s ease-in-out;
}

Answer 2

It is called a sticky navigation bar. Now you can find many variations of this but here is a great tutorial for a simple one.

Tutorial

Answer 3

You simply apply in bootstrap with afix

$('#navbar').affix({
  offset: {
    top: 50
  }
});

Update Via data attributes To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.

<div data-spy="affix" data-offset-top="60">
  ...
</div>

You can set up on data-offset-top="200" when you need to show. here is the example

DEMO http://jsfiddle.net/6P5sF/56/

Reference: http://getbootstrap.com/javascript/#affix