Menu icon Foundation
Responsive sticky menu

Hi,

I'm coding a website. I got a header composed of two parts:

<div id="header">
     <div class="header_content"></div>
     <div class="header_navbar" data-sticky-container>
          <div class="header_sticky sticky" data-sticky data-top-anchor="150" data-margin-top="0">
          </div>
     </div>
</div>

Here's the css part:

#header .header_content {
z-index: 999;
display: none;
position: relative;
}

@media screen and (min-width: 40em) {
#header .header_content {
display: block;
height: 150px;
}
}

@media screen and (min-width: 64em) {
#header .header_content {
height: 250px;
}
}

My problem is that the data-top-anchor value of my sticky menu .header_sticky does not adapt to the window.height, unlike the .header_content div.

How can I fix that?

stickyfoundation 6top bar

Hi,

I'm coding a website. I got a header composed of two parts:

<div id="header">
     <div class="header_content"></div>
     <div class="header_navbar" data-sticky-container>
          <div class="header_sticky sticky" data-sticky data-top-anchor="150" data-margin-top="0">
          </div>
     </div>
</div>

Here's the css part:

#header .header_content {
z-index: 999;
display: none;
position: relative;
}

@media screen and (min-width: 40em) {
#header .header_content {
display: block;
height: 150px;
}
}

@media screen and (min-width: 64em) {
#header .header_content {
height: 250px;
}
}

My problem is that the data-top-anchor value of my sticky menu .header_sticky does not adapt to the window.height, unlike the .header_content div.

How can I fix that?

This post has been closed. No new replies can be added.

Rafi Benkual about 3 years ago

Not sure what you mean. Are you anchoring it to the top of the page? You can instead anchor it to the bottom of the header.

 

This might help: http://zurb.com/university/lessons/create-a-menu-that-sticks

John Rush about 3 years ago

Oh yes ! It works perfectly thank you.

So I just changed the header-sticky data-top-anchor like this:

<div class="header_sticky sticky" data-sticky data-top-anchor="header:bottom" data-margin-top="0">