push or reveal mode does not work with sticky header

[nick0]

Hello Vasileios,

I have come across one issue in using your amazing off canvas script.

I have got it working pretty well with my content but I am having an issue with the sticky header...

The sticky header does not work in push or reveal mode. Adding the "c-offcanvas-content-wrap" class to the #wrapper div (or as a div outside or inside the wrapper) breaks the sticky header. Full code shown in the codepens.

<div class="c-offcanvas-content-wrap"></div>
<div id="ocSB" class="js-offcanvas" data-offcanvas-options='{"modifiers":"right,push"}' role="complementary" hidden></div>
.c-offcanvas-content-wrap { position: relative; overflow: hidden; z-index: 3; }

push codepen

Whereas the sticky header works fine in overlay mode (the header goes pink when sticky). "c-offcanvas-content-wrap" div not needed for overlay mode and was renamed for simplicty sake.

eg <div class="c-offcanvas-content-wrap22"></div>    
<div id="ocSB" class="js-offcanvas" data-offcanvas-options='{"modifiers":"right,overlay"}' role="complementary" hidden></div>

overlay codepen

I have done some web searching but have not found a solution. I am not sure if this is a javascript issue or a css issue or if I will just have to use the overlay mode when I want to use a sticky header.

My gut feel is that its a css issue. But really I have no clue as the transform code is pretty complex for me. Perhaps I can't push / reveal an already fixed item (the sticky header)?

Any ideas?

Thanks in advance and all the best.

[vmitsaras]

Hi @nick0
i think this will fix it:
codepen demo
I've added this line of CSS

.c-offcanvas-content-wrap { transform: none; }

[nick0]

Hi Vasileios,

Thanks so much for getting back to me and thanks for your expert help.

That is really close. The sticky header works which is great.
Is there a way to keep the sticky header visible (like how it works without the sticky header where you can see everything on the page)?

I tried to achieve this. The closest I can get is with the following css:
body.sticky.has-offcanvas--visible.has-offcanvas--push .c-offcanvas-content-wrap--push { transform: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
Here is a codepen demo

That is almost Right.

• Sticky Header works.
• Off canvas push works when not sticky.
• When header sticky, and opening off canvas, off canvas works like overlay mode (which is fine)
• On scrolling down the page when off canvas is open, sticky header becomes visible (which is great)
• However this "push / overlay" display style creates a circular effect when off canvas is open and scrolling up and down the page as the header become sticky or not sticky?

Can you think of a way to avoid this circular shift when scrolling between normal header and sticky header?

I guess this raises a point... is it possible to push content that has a sticky header and work in the same manner as when there is a normal header / content)? Perhaps it's not possible because the sticky header has css fixed position? If not perhaps better to use overlay mode when using with a sticky header? What do you think?

Thanks again and have a great day.