-1

I'm attempting to create a layout that looks like this, where the logo can be scrolled past, but menu remains fixed to the top of the page:

^^ Logo ^^
~ ~ ~ ~ ~ ~ ~ ~
** Menu **
~ ~ ~ ~ ~ ~ ~ ~
Body text body text body text.

This jsfiddle perfectly represents my plan. I'm using Bootstrap's Affix plugin to turn the menu "sticky" on scrolling, and that works well. The issue is, the body (section#main) rolls over the menu when I scroll up.

Site markup is roughly:

<header>
    <div id="logo"></div>
    <div id="nav-search">
        <div class="row">
            <div id="menu-top"></div>
        </div>
    </div>
    <div class="clearfix"></div>
</header>

<section id="main" class="row">
</section>

I'm stuck figuring out how to convince #nav-search to contain itself. I am setting a height on #nav-search. Using z-index, I can push the #nav-search div on top, but that still means that at the moment the menu is affixed, a certain amount of the body becomes obscured. What am I missing?

jamesfacts
  • 371
  • 2
  • 14

1 Answers1

0

This fixed it for me in the link you sent:

 #nav-wrapper.affix {
  postion: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}
stannersuperior
  • 69
  • 6
  • The styles are pretty verbose, I wouldn't want to subject anyone to their depth. If I play with the z-index I can get the menu div to appear on top, but that doesn't solve the real issue: the menu div doesn't "push down" the content below it. – jamesfacts May 12 '16 at 23:50
  • It's not easy with out any css-code. but you might find something here: http://stackoverflow.com/questions/14357576/bootstrap-menu-top-affix?rq=1 – stannersuperior May 13 '16 at 00:06
  • That's a good point. Here's a fiddle with the live markup, it demonstrates the issue: https://jsfiddle.net/jamesfacts/45pre1wd/ – jamesfacts May 13 '16 at 00:49
  • Edited the answer now, and from the link you sent, it worked when you set the z-index of #nav-wrapper.affix to 1. And if the menu-div is fixed, there is no way that I know of that can push the content below down, other than using margin-top on that content or something. – stannersuperior May 13 '16 at 01:19
  • You're completely correct—the z-index is definitely necessary. One other change turned out to be the solution to my issue: the wrapping div around the nav can't have the bootstrap class "row." Removing the row (and setting the wrapper height via jQuery) makes the scrolling appear to remain in the normal doc flow. Revised fiddle: http://jsfiddle.net/jamesfacts/03ckw7p4/1/ – jamesfacts May 13 '16 at 18:36