Menu icon Foundation

Designer

My Posts


My Comments

Philipp Jung commented on Philipp Jung's post over 3 years

Hey Adam,
thanks a million for your post here and in Vlad's thread! I could find the solution thanks to your code. I had a structure like this
<div class "title-bar-container" data-sticky-container>
<div class="title-bar" data-sticky data-options="marginTop: 0;" style="width:100%">
title-bar-left, right, whatnot
</div>
</div>
which does not work. You need to rename the class "title-bar" into "sticky" and nest a new class "title-bar" into the other two, like this
<div class "title-bar-container" data-sticky-container>
<div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width:100%">
<div class="title-bar">
<div class="title-bar-left"><ul class="menu">
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
</ul></div>
<div class="title-bar-right"><ul class="menu">
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
</ul></div>
</div>
</div>
</div>

 
Which means by the way that the documentation for sticky is outdated. All glory belongs to Adam, thanks again and have a nice week!

Philipp Jung commented on Vladimir Kharaman's post over 3 years

Hey Vladimir,
looks like we ran into the same problem. I'm still not sure why this doesn't work, I only ecounter this buggy behavior with
data-options="marginTop:0"

I searched the template-section, looking for a template with a sticky top-bar but I couldn't find one for foundation 6. I honestly have no idea why this behavior exists, I'll just avoid using a sticky top-bar for now I guess. Might be an official bug as well, I didn't check git.
Alec here ran into troubles with his top-bar as well, he solved it by setting up his development-environment differently.

Posts Followed


  • 3
    Replies
  • Going Live - Best Practices

    By Todd Richards

    publishing

    I'm new to&nbsp;using the command line and Foundation "SASS" style, but after&nbsp;understanding all of the benefits of doing so I probably won't ever go back to the manual download. &nbsp;The question that I have is about all of the additional folders/fi... (continued)

    Last Reply by Todd Richards over 3 years ago



Following

    No Content

Followers

My Posts


My Comments

You commented on Philipp Jung's post over 3 years

Hey Adam,
thanks a million for your post here and in Vlad's thread! I could find the solution thanks to your code. I had a structure like this
<div class "title-bar-container" data-sticky-container>
<div class="title-bar" data-sticky data-options="marginTop: 0;" style="width:100%">
title-bar-left, right, whatnot
</div>
</div>
which does not work. You need to rename the class "title-bar" into "sticky" and nest a new class "title-bar" into the other two, like this
<div class "title-bar-container" data-sticky-container>
<div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width:100%">
<div class="title-bar">
<div class="title-bar-left"><ul class="menu">
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
</ul></div>
<div class="title-bar-right"><ul class="menu">
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Text</a></li>
</ul></div>
</div>
</div>
</div>

 
Which means by the way that the documentation for sticky is outdated. All glory belongs to Adam, thanks again and have a nice week!

You commented on Vladimir Kharaman's post over 3 years

Hey Vladimir,
looks like we ran into the same problem. I'm still not sure why this doesn't work, I only ecounter this buggy behavior with
data-options="marginTop:0"

I searched the template-section, looking for a template with a sticky top-bar but I couldn't find one for foundation 6. I honestly have no idea why this behavior exists, I'll just avoid using a sticky top-bar for now I guess. Might be an official bug as well, I didn't check git.
Alec here ran into troubles with his top-bar as well, he solved it by setting up his development-environment differently.

Posts Followed



Following

  • No Content

Followers

  • No Content