how do I keep a nav bar at the top of the page?

Question

I'm trying to make my nav bar stay at the top of the page like on forbes.com

I know I could do

nav
{
   position: fixed;
   top: 0;
}

but the nav bar isn't at the top of the page, it comes after the logo... When you scroll down however, I want the nav bar to stick to the top of the screen..

This is my site

They are using javascript/jQuery to handle this - you can see the "container large" class has a style that switches when it hits the top of the page. When it hits the top, it becomes fixed, otherwise it's relative --- Are you willing to use Jquery? — ntgCleaner, Jan 18 '13 at 01:16
I'm willing to use jquery even though I've not really ever coded it - I'm pretty good with CSS and HTML? Will it be simple enough? What would the code look like? — Adam Scot, Jan 18 '13 at 01:25
The basic premise is this: get the height of the header (above the nav) get the position of the window (the entire document). When the position of the window is greater than the position of the header height, give the nav a new style of position:fixed. Unfortunately, I don't have enough time to actually write it. — ntgCleaner, Jan 18 '13 at 01:26
Thanks for the help - I'll hopefully be able to figure this one :D — Adam Scot, Jan 18 '13 at 01:27
it can be done in pure css. looks like you solution works well in firefox and not ie. In ie it is not inheriting the background — Ray, Jan 18 '13 at 01:58
If you don't mind using a framework, take a look at [Twitters Bootstrap](http://twitter.github.com/bootstrap/). It can do that and many other really cool things with very little developer effort. — lmcanavals, Jan 18 '13 at 03:03

score 13 · Accepted Answer · edited May 30 '18 at 13:07

13

the solution is easy, keep your css while adding px

nav
{
   position: fixed;
   top: 0px;
}

edited May 30 '18 at 13:07

David

3,285
1
37
54

answered Jul 25 '13 at 17:28

user2584704

154
1
2

score 7 · Answer 2 · edited May 30 '18 at 13:27

You could try it in JQuery like this:

HTML:

<div id="wrapper">

    <header>
        <h1>Floater Navigation</h1>
    </header>

    <nav>
        <p>Navigation Content</p>
    </nav>

    <div id="content">
            <p>Lorem Ipsum.</p>
    </div>
</div>

CSS:

#wrapper {
    width:940px;
    margin: 0 auto;
}

header {
    text-align:center;
    padding:70px 0;
}

nav {
    background: #000000;
    height: 60px;
    width: 960px;
    margin-left: -10px;
    line-height:50px;
    position: relative;
}

#content {
    background: #fff;
    height: 1500px; /* presetting the height */
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.fixed {
    position:fixed;
}

JQuery:

$(document).ready(function() {

    // Calculate the height of <header>
    // Use outerHeight() instead of height() if have padding
    var aboveHeight = $('header').outerHeight();

    // when scroll
    $(window).scroll(function(){

        // if scrolled down more than the header’s height
        if ($(window).scrollTop() > aboveHeight){

            // if yes, add “fixed” class to the <nav>
            // add padding top to the #content 
            // (value is same as the height of the nav)
            $('nav').addClass('fixed').css('top','0').next().css('padding-top','60px');

        } else {

            // when scroll up or less than aboveHeight,
            // remove the “fixed” class, and the padding-top
            $('nav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});

source: http://www.jay-han.com/2011/11/10/simple-smart-sticky-navigation-bar-with-jquery/

Thanks, works fine. easy to integrate and to understand. But i only used tag ´nav´ and two styles for ´nav´ and ´.fixed´. The rest of element, what they are used to? — IgniteCoders, Oct 09 '14 at 08:41

score 2 · Answer 3 · answered Jun 07 '16 at 21:26

Here is a way to do it without JQuery. It works by setting a scroll listener to the window, and switching the class of the nav bar when the scroll reaches the right position.

var body = document.getElementsByTagName("body")[0];
var navigation = document.getElementById("navigation");

window.addEventListener("scroll", function(evt) {
  if (body.scrollTop > navigation.getBoundingClientRect().bottom) {
    // when the scroll's y is bigger than the nav's y set class to fixednav
    navigation.className = "fixednav"
  } else { // Overwise set the class to staticnav
    navigation.className = "staticnav"
  }
});

h1 {
  margin: 0;
  padding: 10px;
}
body {
  margin: 0px;
  background-color: white;
}
p {
  margin: 10px;
}
.fixednav {
  position: fixed;
  top: 0;
  left: 0;
}
.staticnav {
  position: static;
}
#navigation {
  background-color: blue;
  padding: 10px;
  width: 100%;
}
#navigation a {
  padding: 10px;
  color: white;
  text-decoration: none;
}

<h1>
Hello world
</h1>
<nav id="navigation" class="staticnav"><a href="#">Home</a>  <a href="#">About</a>
</nav>
<!-- We initialize the nav with static condition -->
<p>
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
</p>

Archita Sundaray · Answer 4 · 2017-09-21T17:31:02.560

This is how the navigation-bar sticks to the top after scrolling past it.

.affix {
 top: 0px;
 margin: 0px 20px;
}
.affix + .container {
 padding: 5px;
}

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="50">
...
</nav>

"navbar" creates a block on it's own, so all you've to do is mention only the margin in your css file .navbar { margin: 0px auto; /*You can set your own margin for top-bottom & right-left respectively*/ z-index: 1; } The z-index sets priority to that particular element, so that other elements do not scroll over it. If z-index has a positive value, then it has the highest priority otherwise lowest priority(for negative values). I hope this is helpful.

score 1 · Answer 5 · answered Nov 27 '19 at 16:03

You can use:

nav
{
   position: fixed;
   top: 0;
   left: 0;
}

See this complete example example:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

#header {
    width: 100%;
    height: 90vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 60px 12px;
}

header nav {
    width: 100%;
    height: 10vh;
    background-color: #262534;
    display: grid;
    align-items: center;
    border-bottom: 4px solid #F9690E;
    position: fixed;
    top: 0;
    left: 0;
}

header .nav-item {
    display: inline;
    margin: 0 8px;
}

header .nav-item:first-of-type {
    margin-left: 48px;
}

header .nav-item a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}

header .nav-item a:hover {
    text-decoration: underline;
}

header #more-drop-down-menu a:last-of-type:hover {
    text-decoration: none;
}

header .nav-item a.active {
    text-decoration: underline;
    color: #F9690E;
}

/** menu**/
menu{
  margin-top:14vh;
  text-align: center;
}
menu p{
  font-size: 14px;
  line-height:125%;
  padding: 25px;
}

<header>
         
        <!-- Start Nav -->
        <nav>
            <ul>
                <li class="nav-item"><a href="#Home" class="active">Home</a></li>
                <li class="nav-item"><a href="#About">About</a></li>
                <li class="nav-item"><a href="#Contact">Contact</a></li>
                <!-- END Drop Down Menu -->

            </ul>
        </nav>
        <!-- End Nav -->   
    </header>
 <menu>
 <h1> Example of fixed nav</h1>
     <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque exercitationem ipsa quisquam sunt ex blanditiis iure vero molestias impedit recusandae eius quasi unde assumenda molestiae, dolorem illum, aliquid aut neque?
         Error aut voluptatum molestias ad quidem odio labore eaque veniam fugiat earum, aliquid incidunt beatae nam pariatur minus voluptates atque suscipit cupiditate et! Tenetur eveniet delectus aspernatur? Perferendis, modi similique.
         Debitis eaque suscipit tenetur, laboriosam perferendis possimus voluptas expedita labore aspernatur. Nobis cum vel quae voluptates pariatur architecto quas labore assumenda ipsam sint tenetur, nisi in non alias quisquam atque.
         Animi, exercitationem ullam laudantium dolores praesentium distinctio illo, fugiat iusto soluta quibusdam eius? Quaerat reiciendis voluptatum voluptatibus porro saepe blanditiis nam iure odio soluta, cum ipsam, suscipit molestiae natus eius!
         Quasi, quae harum? Fuga facere facilis, cumque veniam voluptatum itaque aspernatur natus ratione nesciunt dolores qui, iste ullam dolorem totam accusantium officiis nisi hic esse reiciendis molestias. Unde, inventore fugiat?
         Corrupti similique consequatur provident aliquam voluptates minima modi voluptatibus exercitationem magni, consectetur delectus? Rerum quo cumque dolorem voluptatibus tempora, nesciunt laboriosam eum assumenda deserunt error ullam asperiores velit suscipit corrupti!
         Perspiciatis architecto illo quis dolore necessitatibus ad accusantium voluptatem esse ducimus! Modi facilis consequuntur mollitia asperiores praesentium. Tempora vero quod aliquam, alias quis, nisi cumque totam sed odit, hic suscipit.
         Aut molestias minus accusantium, cumque, aspernatur quia aliquam accusamus nostrum saepe, eius vero velit. Labore a deserunt voluptate illo, eum eos, ad saepe, eius temporibus quis eaque ea reiciendis soluta!
     </p>
 </menu>

score 1 · Answer 6 · edited Dec 14 '19 at 00:08

1

nav {
    position: sticky;
    top: 0;
}

edited Dec 14 '19 at 00:08

Skoua

3,373
3
38
51

answered Dec 13 '19 at 17:27

jacks

21
1

Please provide more details about your answer. – Skoua Dec 14 '19 at 00:08

score 0 · Answer 7 · edited Jun 09 '22 at 17:03

0

Here is the method I tried

.nav{
    position: sticky;
    top: 0;
    width: 100%;
}

edited Jun 09 '22 at 17:03

Lee Taylor

7,761
16
33
49

answered Jun 08 '22 at 15:52

Amos

43
5

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 08 '22 at 17:22

score -1 · Answer 8 · answered Jan 18 '13 at 02:55

-1

Use position absolute and set the top value to the number of pixels you want the Nav bar to be from the top of the browser.

answered Jan 18 '13 at 02:55

Chris Love

3,740
1
19
16

Isn't that what you want? To control how far the bar is from the top of the screen? It works for me and I use it all the time. – Chris Love Jan 21 '13 at 17:13
Ok so Forbes uses position fixed, the problem is that wont work on tablets and phones. That is why I use absolute positioning. – Chris Love Jan 21 '13 at 17:15
When you scroll down, it'll still be X px from the top, leaving a gap of X px above the bar. That's not how OPs example works. It's X px from the top initially but as you scroll down, it's 0px from the top. – sachleen Jan 21 '13 at 17:19
yeah that would be just be a little javascript to detect the scrolltop position and change the top CSS rule for the main wrapping element. – Chris Love Jan 21 '13 at 17:42
Thats how I've always done it, and the js is an if/else with document.getElementById("navbar").style.position = "fixed/relative"; dont even need to change the "top: 0;", you can do the same thing with a footer. I always add "z-index: 1;" though. – MVB76 Aug 31 '21 at 01:53
This was originally opened about 8 years ago, and things change. Today position fixed should work across all devices and browsers. :) – Chris Love Sep 08 '21 at 18:33

score -1 · Answer 9 · answered Apr 25 '19 at 19:33

-1

In your css file:

body {
    padding-top: 0px;
}

answered Apr 25 '19 at 19:33

Andreas Damen

39
7

But bro this has nothing to do with fixing the nav on the top. – DINA TAKLIT Nov 27 '19 at 16:05

how do I keep a nav bar at the top of the page?

9 Answers9

Linked

Related