Affix "bootstrap".

Hi all

I found it cool the cattery works, but I want to customize it, but need help. Currently, if someone scrolls the page, menu goes until it hits the top of the browser, then it stops and other content under the menu when scrolling. What I would like is when someone comes to this page, they will see a navigation bar regular with the menu affix underneath. I tried, but it did not work for me. No idea how I can do?

Here is the code:

<! DOCTYPE html >

< html >

< head >

< title > < /title > Bootstrap example

< meta charset = "utf-8" >

< meta name = "viewport" content = "width = device-width, original scale = 1" >

" < link rel ="stylesheet"href =" http://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/CSS/bootstrap.min.CSS ">

" < script src =" https://AJAX.googleapis.com/AJAX/libs/jQuery/1.11.3/jQuery.min.js "> < / script > .

" < script src =" http://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js "> < / script > .

< style >

{body

position: relative;

}

{.affix}

top: 0;

Width: 100%;

z index: 9999! important;

}

{.navbar}

margin-bottom: 0px;

}

. Affix ~ {.container-fluid

position: relative;

top: 50px;

}

#section1 {padding-top: 50px; height: 500px; color: #fff; background-color: #1E88E5 ;}}

#section2 {padding-top: 50px; height: 500px; color: #fff; background-color: #673ab7 ;}}

#section3 {padding-top: 50px; height: 500px; color: #fff; background-color: #ff9800 ;}}

#section41 {padding-top: 50px; height: 500px; color: #fff; background-color: #00bcd4 ;}}

#section42 {padding-top: 50px; height: 500px; color: #fff; background-color: #009688 ;}}

< / style >

< / head >

< body spy-data = "scroll" data-target = ".navbar' data-offset ="50">

< div class = "container-fluid" style = "background-color: #F44336;" color: #fff; height: 200px; ">

< h1 > Scrollspy & example sign < / h1 >

fixed navigation on scroll bar < h3 > < / h3 >

< p > do scroll down this page to see how the navigation bar with data-spy behaves = "affix" and spy-data = "scrollspy. < /p >

< p > the navigation bar is fixed on the top of the page once you have reached a fixed pixel amount, and the links in the navigation bar are automatically updated based on the scroll position. < /p >

< / div >

< nav class = "navbar navbar-reverse" data-spy = 'paste' data-offset-top = "197" >

< div class = "container-fluid" >

< div class = "bar navigation-header" >

< button type = "button" class = 'bar of navigation-toggle' toggle data = 'collapse' data-target = "#myNavbar" >

< span class = 'bar icons' > < / span >

< / button >

< a class = "brand navigation bar" href = "#" > WebSiteName < /a >

< / div >

< div >

< div class = "navbar-collapse collapse" id = "myNavbar" >

< ul class = "navbar-nav nav" >

< li > < a href = "#section1" > Section 1 < /a > < /li >

< li > < a href = "#section2" > Section 2 < /a > < /li >

< li > < a href = "#section3" > Section 3 < /a > < /li >

< class li = "dropdown" > < a class = 'list drop-down-turn' data-toggle = "drop down list" href = "#" > Section 4 < span class = "circumflex accent" > < / span > < /a >

< ul class = menu "dropdown" >

< li > < a href = "#section41" > Chapter 4-1 < /a > < /li >

< li > < a href = "#section42" > Chapter 4-2 < /a > < /li >

< /ul >

< /li >

< /ul >

< / div >

< / nav >

< div id = "1" class = "container-fluid" >

Section 1 of the < h1 > < / h1 >