How to always make page content appear beneath navigation bar?


Tags: javascript,html,css,layout,positioning

Problem :

I want to keep the content of my page to always appear beneath the navigation bar, similar to how this page works:

http://www.google.com/intl/en/enterprise/apps/business/products.html#calendar

You can scroll down or up in the content, but the navigation bar never goes away.

For this purpose, I've used position:fixed to fix the navigation bar to the top of the page. This works, but I'm still able to scroll the content up and down, causing it to run 'through' and over the navigation bar, when I want the content to always be pushed below the navigation bar.

Any ideas on how to do this? Here's my css code for the <ul id='navigation'> containing the navigation:

#navigation
{
    text-align: center; 
    position: fixed; 
    float: left;    
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    list-style-type: none;
}

#navigation li
{
    display: inline-block; 
    width: 150px;
    height: 110px;
    cursor: pointer;
}

And here's the css for the <div id="container"> which appears below #navigation and holds all of the page content body:

#container
{
    position: absolute;
    margin-top: 180px;
    font-size: 25px;
    width: 90%;
}


Solution :

The reason it's going through is because you didn't set a background color to your navigation bar. Try that.

Edit: Looked at your source code. Replace navigation CSS in style.css file with this:

#navigation
{
    text-align: center; 
    position: fixed; 
    float: left;    
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    list-style-type: none;
    background-color: #FFFFFF;
    z-index:999;
}

The problem was the z-index. Putting it at 999 puts the navigation bar on top of all other elements.


    CSS Howto..

    How to make css smaller?

    How to apply background color to buttons using css in asp.net?

    How do I set a cursor css for text inside li element?

    How to make a curved edge hexagon by using CSS

    How can I have my cards stack on top of one another?

    how to properly resize navbar fixed in bootstrap

    How to apply common JavaScript and CSS for all my jsp pages in the application?

    How to hide a div with jquery or alternative?

    How to preload predefined images in Java-Script / jQuery?

    how do I make overflowing and float positioned elements stay all on one line?

    Want to duplicate css styles for an ID based style, how to do this with least duplication?

    How can I wrap this text so it doesn't overflow past the widget container?

    How to use a text file's contents in HTML as text [duplicate]

    How can I expand this tag?

    How to Implement Resizing in CSS / DOM

    How to calculate percentages in LESS CSS?

    How to allow users to set up a color theme?

    How to fix element on the center of scrollable page?

    jquery - How to determine if a div changes its height or any css attribute?

    How to add an image to a transparent box using css

    Primefaces: how to change the default icon on the button of the calendar field?

    How to Convert SASS on the fly to CSS in Python?

    How to change pseudo class property?

    CSS or Javascript href hover (or mouseover) showing additional clickable links

    How to rotate a chart 90 degrees including the text values?

    How to change only one function of CSS transform property w/ multiple functions?

    How to match baseline in two floating divs

    How to align image and download button in css?

    How can I use an alert or form input to allow a user to set a value of a CSS parameter [closed]

    jQuery - failed show/hide buttons