Menu icon Foundation
How to get rid of the margin-top in stickey
     <div class="sticky is-stuck is-at-top" data-sticky="s2wr0c-sticky" style="width: 100%; max-width: 1438px; margin-top: 1em; top: 0px; bottom: auto;" data-resize="nd1cjd-sticky" data-events="resize">
     

How to get rid of the margin-top: 1em; here? Cant find the place to override it ?

data-top-margin="0px";  

Or in the css stickey{margin-top:0px;} does not work here.
So how to get rid of this setting? Thanks for helping me out!

W.

stickeymenunavmargin

     <div class="sticky is-stuck is-at-top" data-sticky="s2wr0c-sticky" style="width: 100%; max-width: 1438px; margin-top: 1em; top: 0px; bottom: auto;" data-resize="nd1cjd-sticky" data-events="resize">
     

How to get rid of the margin-top: 1em; here? Cant find the place to override it ?

data-top-margin="0px";  

Or in the css stickey{margin-top:0px;} does not work here.
So how to get rid of this setting? Thanks for helping me out!

W.

Wiechert Hooghwinkel over 2 years ago

Any thoughts on this? Thanks.

 

W.

Wiechert Hooghwinkel over 2 years ago

I still did not find this. How to get rid of the Sticky generated margin. Anyone?

margin-top: 1em;

OwenJ over 2 years ago

nice, thanks

Wiechert Hooghwinkel over 2 years ago

Any one who has the solution for this? Thanks!

Val Ery over 2 years ago

Hi Wiechert!

Try it

a) add to element with 'data-sticky" the additional data attribute data-options="marginTop:0;"

b) or add data-margin-top="0"

1em adds in foundations sticky plugin (default behavior)

Sticky.defaults = {

  marginTop: 1,

}

Wiechert Hooghwinkel over 2 years ago

Hi thanks this was what I was looking for. Only one minor problem left as you can see here:
http://www.pizzaworkshop.nl/index.php

The logo on top is still hiding behind other div's cant find the prperty which is responsible for that :) tried all kind of settings but nothing worked until now :)

Thanks W.

 

Robbert Stapel over 2 years ago

can you post your top-bar code? seems you havent wrapped it up correctly.

 

Wiechert Hooghwinkel over 2 years ago

this is the part for the top-bar (its part of a TYPO3 temlate).

 

<!-- Hier komt het Typo3 menu -->
<div  class="top-bar-container" data-sticky-container >
    <div class="sticky" data-options="marginTop:0;" data-sticky style="width:100%;" >
      <div class="top-bar">
      <a href="/"><img class="header_logo hide-for-small" style="margin-top:10px;" src="typo3conf/ext/workshop_template/Resources/Public/Css/pizzaworkshop.svg"></div></a>
      <a href="/"><img class="mobile-top_logo hide-for-large hide-for-medium" src="typo3conf/ext/workshop_template/Resources/Public/Css/pizzaworkshop.svg"></div></a>
    
        <div class="row column down sticky" data-sticky-container data-sticky data-top-anchor="1">
 		           <!-- navigatie -->
 		           <div class="top-bar-right">  
                       <f:cObject typoscriptObjectPath="lib.nav_main" />
 		           </div>
                 </div>          
        </div>
      </div>
    </div>
  </div>

Wiechert Hooghwinkel over 2 years ago

Any idea why my logo is hiding when opening the page?

Robbert Stapel over 2 years ago

 

 

Seems the way you wrapped your top-bar causes the problem...
You have wrapped your top-bar in a div with the following classes:

<div class="sticky is-anchored is-at-top">
<!-- Your top-bar div sits in here -->
</div>

With these classes the logo is invisible, but when i change these classes to 

<div class="sticky is-at-top is-stuck">
<!-- Your top-bar div sits in here -->
</div>

The logo displays fine...
it seems your template causes these style changes when scrolling the page.

You can test this by using "inspect element" in your browser and change the classes as i did.
Let me know if this solved your problem.

 

Val Ery over 2 years ago

Robbert is right, you've overdone it with markup. You have two sticky blocks: one with the logo, the second with a top margin in 16 pixels. Next, you probably tried to place sticky containers with a z-indexes...

Now, with your markup, I see only one way to make the logo visible (and this will add additional problems :( )

.off-canvas-wrapper {
    overflow: visible;
}

Or... Change the markup.

Wiechert Hooghwinkel over 2 years ago

Thanks both for the input. I will have to change the mark-up than. Did not expect that this would be so complicated.
But which part of the mar-up is giving me the is anchored and what mark-up to use to get is-stuck instead?

is-anchored is-at-top


is-at-top is-stuck

This is what I have now in my html:

 <div class="row column down sticky" data-sticky-container data-sticky data-top-anchor="1">

 is data-top-anchor= to be replaced with something ? Like data-stuck ?? I did not see any-thing like stuck mentioned in the http://foundation.zurb.com/sites/docs/sticky.html

Robbert Stapel over 2 years ago

The markup causing the problems is likely to come from the template/CMS you use. My advise: start building your website in Foundation. Once it is finished, start with implementing it into the CMS.

Wiechert Hooghwinkel over 2 years ago

Hi, I solved it. It's not because of the CMS but was because of the html. I now have both the logo and nav in the same <div> and have only the sticky applied to the surrounding div. Which works fine.

Thanks for your advices.

Val Ery over 2 years ago

Hi Wiechert!

Well done! This is the right solution - to place all the elements of the page inside the block "off-canvas-wrapper".
But not everything is perfect yet :(  Turn on responsive design mode in the browser, click on the menu toggler ... and return to normal mode.
Everything is fine?

Aleksander Sokalszczuk almost 2 years ago

A quick check of the foundation.sticky.js file helped me to get a solution for this issue.
So to the point, while initiating the javascript component like in the documentation
https://foundation.zurb.com/sites/docs/sticky.html#javascript-reference, you have to specify the value of margin-top, which according to to the js code should be put like this:

Original documentation

var elem = new Foundation.Sticky(element, options);
With needed parameter: 
var elem = new Foundation.Sticky(element, {marginTop: 0});
So basically just remember to pass a proper option while initializing the JavaScript component.

Helped me, I hope it will help you.

 

Andy Propper almost 2 years ago

Thanks Val Ery!

Jane Loyal almost 2 years ago

Thanks Aleksander Sokalszczuk for the info. Its of great help. Toddler Harness

Robert Stark 7 days ago

This seems to work in foundation 6.5:

<nav class="sticky-container" data-sticky-container>
                <div class="sticky" data-sticky data-anchor="mainText" data-sticky-on="medium" data-margin-top="0">