Twitter Bootstrap: fix the nav bar top when user scrolls past it

Question

I am using Twitter Bootstrap but having problems with getting the navigation bar to stick to the top when the user scrolls past it.

Please see my diagram of the homepage am working on.

diagram: https://i.stack.imgur.com/OKYCA.png
code: https://i.stack.imgur.com/G3gP6.png

Example: https://thomsonreuterseikon.com/ (note how the nav bar stick to the top of the page when you scroll down)

Try referring here: [twitter bootstrap navbar fixed top overlapping site](http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site). Also I noticed in your CSS you say navbar-static-top, are you looking for navbar-fixed-top? — holbrookbw1, Jul 17 '13 at 11:25
@holbrookbw1 - navbar-fixed-top is what am after but only to come into effect as you start to scoll past the nav bar. Does that make sense? So when the page first loads the nav bar should be below the header (as illustrated when my image links) but as you start to scroll down, it should stick to the top. (there is a separate reason why am using navbar-static-top - see my reply to GeneralBrae) — Andy, Jul 18 '13 at 14:14

Brae · Answer 1 · 2013-07-19T09:21:10.790

0

Your class declaration is wrong I think. Try changing the line below:

nav class="navbar navbar-static-top"

to

div class="navbar"

EDIT:

To centralise the nav elements, add "row" to the line below:

div class="container" => div class="container row"

Then set the ul tag class to also include span12, so

ul class="nav span12"

Now to set the position of your nav elements, set their classes to be span2, and offset the first one (probably use offset1) so you would have

li class="active span2 offset1"
li class="span2"
li class="span2"

and so on. Hope that works for you. You may have to fiddle around with the offsets/spans a bit but it should work fine. The row class divides the width of the container into 12 parts. You have 5 nav elements so if you set them each to span2 you should have enough to offset by 1 and get them centered.

edited Jul 19 '13 at 09:21

answered Jul 17 '13 at 11:25

Brae

484
1
3
15

If I don't include "navbar-static-top" bit my nav bar ends up looking like this http://imagebin.org/264933 - compare this with the ealier image link (I want the nav bar to be full width but the content to be centred and this seems to only work when I include navbar-static-top) – Andy Jul 18 '13 at 14:10
Ok didn't realise you wanted to centralise it. Please see my edit – Brae Jul 19 '13 at 09:14
Thanks but your solution to centre the nav bar makes each menu item expand to occupy two span columns and create a a 5px white gap between the nav bar and the hero div, so for now am sticking to the class 'navbar-static-top'. Regarding my original question, I have come up with my own solution which does exactly what am looking for but if you have a better or more efficient solution, please let me know. – Andy Jul 22 '13 at 08:45

Žarko Selak · Answer 2 · 2013-07-17T11:40:22.973

0

or u can try to do it custom

<div class="nav-collapse">nav nav nav </div>


body {
    height: 3000px;
    top: 0;
    position: relative;
}
.nav-collapse {
    position: relative;
    top: 100px;
    width: 100%;
    background: #CCC;
    height: 100px;
}


$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
        $('.nav-collapse').css('top', $(window).scrollTop());
    }
});

http://jsfiddle.net/cc48t/1350/

this is bootstrap method http://prntscr.com/1fx30g

u have class static and u need class .navbar-fixed-top

edited Jul 17 '13 at 11:40

answered Jul 17 '13 at 11:34

Žarko Selak

1,073
12
19

Thanks for the replies so far but I have come up with my own solution which does exactly what am looking for but if you have a better or more efficient solution, please let me know. – Andy Jul 22 '13 at 08:46

score 0 · Accepted Answer · answered Jul 22 '13 at 08:57

Thanks for the replies so far but I have come up with my own solution which does exactly what am looking for but if you have a better or more efficient solution, please let me know.

Refer to the screenshots of my original question for html code and page layout
I have used the following script (see screenshot): http://s16.postimg.org/abqqs0n51/hhppscript.png

Thanks

Twitter Bootstrap: fix the nav bar top when user scrolls past it

3 Answers3