I'm trying to create a site header using the Sticky plugin and Foundation's XY Grid. The inner <div class="grid-x"> keeps its margin only on the right and I'm failing in finding out why.
I can see in Chrome's inspector that there are negative margins on both sides, there must be some trick used here which I'm not aware of...
HTML:
<header class="grid-container fluid" data-sticky-container>
<!-- the following container has the margin -->
<div class="top-bar sticky grid-x grid-margin-x" data-sticky>
<div class="cell shrink">a</div>
<div class="cell shrink">b</div>
<div class="cell shrink">c</div>
</div>
</header>
If I do this, it works as expected:
<header class="grid-container full" data-sticky-container>
<div class="top-bar sticky grid-x grid-padding-x" data-sticky>
<div class="cell shrink">a</div>
<div class="cell shrink">b</div>
<div class="cell shrink">c</div>
</div>
</header>
It's also fine when I remove the grid-margin-x class. But having full on the container combined with grid-margin-x causes the right margin to appear too...
In general, combining the grid with another element, like top-bar is will cause conflict because these elements have padding and margin of their own.
Moving the grid inside the top-bar, solves this: https://codepen.io/rafibomb/pen/XGXKoz
<header class="grid-container fluid" data-sticky-container>
<div class="top-bar sticky" data-sticky>
<div class="grid-x grid-margin-x">
<div class="cell shrink">a</div>
<div class="cell shrink">b</div>
<div class="cell shrink">c</div>
</div>
</div>
</header>