Vfrdtyky

If your menu height is variable (for responsiveness or because it's loaded dynamically), you can set the top margin to where the fixed div ends. For example:

CSS

.fixed-header {

    width: 100%;

    margin: 0 auto;

    position: fixed;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -ms-box-sizing: border-box;

    box-sizing: border-box;

    z-index: 999;

}

Javascript

$(document).ready(function() {

    var contentPlacement = $('#header').position().top + $('#header').height();

    $('#content').css('margin-top',contentPlacement);

});

HTML

...

<div id="header" class="fixed-header"></div>

<div id="content">...</div>

...

Here's a fiddle (https://jsfiddle.net/632k9xkv/5/) that goes a little beyond this with both a fixed nav menu and header in an attempt to hopefully make this a useful sample.

Having just struggled with this and disliking some of the "hackier" solutions, I found this to be useful and clean:

#floatingMenu{

  position: sticky;

  top: 0;

}

I just had this problem, and this was my solution:

#floatingMenu + * {

    margin-top: 35px;

}

Adjust for the height of your floatingMenu. If you don't know for sure that it's a div following then you can use * rather than div. This is all valid CSS2.

Wrap the menu contents with another div:

<div id="floatingMenu">

    <div>

        <a href="http://www.google.com">Test 1</a>

        <a href="http://www.google.com">Test 2</a>

        <a href="http://www.google.com">Test 3</a>

    </div>

</div>

And the CSS:

#floatingMenu {

    clear: both;

    position: fixed;

    width: 100%;

    height: 30px;

    background-color: #78AB46;

    top: 5px;

}



#floatingMenu > div {

    margin: auto;

    text-align: center;

}

And about your page below the menu, you can give it a padding-top as well:

#content {

    padding-top: 35px; /* top 5px plus height 30px */

}

I just added a padding-top to the div below the nav. Hope it helps. I'm new on this. C:

#nav {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    margin: 0 auto;

    padding: 0;

    background: url(../css/patterns/black_denim.png);

    z-index: 9999;

}



#container {

    display: block;

    padding: 6em 0 3em;

}

To those suggesting the use of margin-top or padding-top to move the main division below the fixed menu - you don't seem to be testing it completely.

If you set a margin or padding, it will scroll with the page and you will lose lines - go try this page

Looks good, does it not? Highlight a word on the bottom visible line and press page-down - the line with the highlighted word, and a few other lines, will be scrolled under the fixed division.

Margin-top or padding-top WILL position the main division below the fixed division but it all falls flat on its face when you page-down or click the scroll bar to scroll one viewport height of the page.

Same problem if you page-up, lines "fall off" the bottom of the view-port.

Does anyone have an actual fix for THIS problem?

I know how to position things - that's fairly easy if you know the basics about margins, padding, etc. - but how do you prevent the loss of lines when scrolling?

I've looked at a lot of examples of what are claimed to be a properly functioning pages with fixed divisions at the top, but they don't work! They all have problems which scrolling.

I have come across some pages appear to work but if the fixed division is made higher, lines will be lost. I believe I know why they appear to work.

Think in terms of how text on a totally normal (no fancy formatting) page scrolls. Do you see the bottom line when you scroll up or do you see the next line - the bottom one having scrolled off the top of the viewport?

Answer - you see the bottom line scrolled to become the top line.

The fixed menu pages that seem to work really don't. Scroll them and the bottom line is scrolled off the viewport but since the next line is visible, it appears that the fixed division works - but we know better, don't we?

If the fixed division gets higher than the height of one line of text, they fail and lines are lost.

The only pages that I've seen that actually work properly are on sites such as yahoo and I don't have the time, nor inclination, to dig down into what is a lot of CSS, HTML, and JavaScript on the pages to get to the heart of the matter.

So - go to that page and see if you can make changes ("inspect" the elements and make changes to the CSS rules) that fix the scrolling problems.

If you can, come back and share your discovery with world.

My page is a good place to look at what it takes to be able to fix a division at the top, center it (and the main division) and restrict it to a max-width. It may help some of you but I'm sorry I don't have a fix for the scrolling problem

Play with the height of the fix division - make it short enough so that only one line shows and then play with the scrolling. Then make it large enough for two lines and then three and play with the scrolling. You'll see the issues.

Here is a page that is supposed to work but it doesn't - read the very last comment - they describe the problem in a different way but it is the same problem

I just tested the page again in Chrome and it seems to work fairly satisfactorily. With FF the problem exists. Haven't tried IE again, yet.

So - what is different with FF?

Here's a page at cNet which works with chrome and ff - so what are they doing?

More testing with Chrome shows that it fails to fully display the bottom line when scrolled. Just part of the line that was at the bottom is visiable when your scroll - so, still need a fix.

#nav{

    position: -webkit-sticky; /* Safari */

    position: sticky;

    top: 0;

    margin: 0 auto;

    z-index: 9999;

    background-color: white;

}

You should try that Pen I hope that will help you and even give more better functionality to use fixed navigation

1.clear:both; you dont need to use clear