Fixed Bootstrap navigation bar

Question

Aloha! I am trying to have Bootstrap's navigation stay at the top of the page and not follow me around as I am scrolling.

My code looks like this:

<nav class="navbar  navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

CSS:

body {padding-top: 70px;}
.navigation {padding-bottom: 30px:}
.navbar-fixed-top .nav { padding: 15px 0;}
.navbar-fixed-top .navbar-brand { padding: 0 15px;}
.navbar-nav > li{
  padding-left:30px;
  padding-right:30px;
}
.navcontainer {
padding-bottom: 30px;
}

I've been looking into it but the only answer I found was to add bottom padding to the nav bar which has been unsuccessful. Would really appreciate some help. Thank you :)

Answer 1

Remove navbar-fixed-top and remove body padding top. Bootstrap navbar-fixed-top archors it to the top of the browser even when scrolling.

.navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    top: 0;
    border-width: 0 0 1px;
}

http://jsfiddle.net/63zvdLyu/8/

Answer 2

I have found a resource that just might suit your need here . You can open up that example website with the inspect element feature in Google Chrome and then just copy the code to your favorite text editor and then you can go through the code there. If you need more help place it in the comments.