Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I make the nav bar always at the top?

I'm using Foundation by ZURB and trying to get the nav bar to the top.

like image 459
Shamoon Avatar asked Nov 14 '12 00:11

Shamoon


People also ask

How do I keep the navigation bar always on top?

To create a fixed top menu, use position:fixed and top:0 . Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.

How do I change the navigation bar position?

Just put your code in div with class of container . Set top and bottom margin to body and that is it.

Should the nav bar go in the header?

Many web designers consider the navigation bar to be part of the header rather than a individual component, but that's not a requirement; in fact some also argue that having the two separate is better for accessibility, as screen readers can read the two features better if they are separate.


2 Answers

I have no idea what those 2 things are, but this is how you fix something in place regardless of window scroll position with CSS:

#navbar {
    position: fixed;
    top: 0px;
    width: 100%;
}​

See here: http://jsfiddle.net/qC2Dt/

like image 145
Alex Wayne Avatar answered Sep 18 '22 08:09

Alex Wayne


If you're using foundations, you can use:

<nav class="top-bar fixed"></nav>
like image 29
vinknee Avatar answered Sep 18 '22 08:09

vinknee