Menu icon Foundation
Keeping the off canvas nav fixed

Hi people,
Was looking for a solution to a minor problem. I have a sticky nav, with link to the off canvas nav (left and right). I want it so whereever the user is in the page, the nav slides in with it's content at the top - but the page stays in the same place. The nearest thing I have got is having it so the page scrolls up. I did this by adding

.off-canvas-wrap.move-right, .off-canvas-wrap.move-left {
position: fixed !important;}

The site can be viewed here:
http://futuraservices.co.uk/Projects/Amara/

Any help would be greatly appreciated! Many thanks!

Off Canvas Navfixed

Hi people,
Was looking for a solution to a minor problem. I have a sticky nav, with link to the off canvas nav (left and right). I want it so whereever the user is in the page, the nav slides in with it's content at the top - but the page stays in the same place. The nearest thing I have got is having it so the page scrolls up. I did this by adding

.off-canvas-wrap.move-right, .off-canvas-wrap.move-left {
position: fixed !important;}

The site can be viewed here:
http://futuraservices.co.uk/Projects/Amara/

Any help would be greatly appreciated! Many thanks!

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

Rafi Benkual over 4 years ago

Cool! It's a beautiful site so far! I think sending the user back to top works but takes the user out of context. I'm not sure the site is long enough to even warrant a fixed bar, even on mobile.

We were able to do this a different way here: http://codepen.io/rafibomb/pen/hApKk

Basically making the content section scrollable works better on mobile too.

Alex Humphries over 4 years ago

Thanks Rafi - for the advice and the complement :)

I think the fixed navigation is going to be more important on other pages - so when for example browsing products the user can check there basket without being taken away from what they are browsing. As you say, taking the user out of context isn't ideal UX.

I can't quite figure out how to apply what you have to my site. How do you mean make the content scrollable? I've tried implementing all the CSS from your example and it seems to make no difference.

Rafi Benkual over 4 years ago

In your HTML, wrap you content with <article> tags.

Also the tab-bar is wrapped with <div class="header">

Alex Humphries over 4 years ago

Thanks again Rafi.

Unfortunately this doesn't work for a couple of reasons. Firstly, wrapping the content in 'article' and adding the CSS classes from your example seems to clash with the wow.js onScroll reveal animations. Secondly, as it is a shrunken nav on scroll the absolute positioning doesn't seem to work either.

Am close to giving up - but feel there must be a solution!

David Stingl almost 4 years ago

Great solution, Rafi!
I'm wondering if this is also possible with Foundation 6?

To be more precise – that's what I tried so far: http://codepen.io/berlindave/pen/jWzjmg

David Stingl almost 4 years ago

Meanwhile I set up another codepen trying to transfer your F5 solution to F6, but it is not working:
http://codepen.io/berlindave/pen/obdezP

Can you figure out the reasons?

[EDIT]Oh, it seems to work! Great! Again many thanks to Rafi![/EDIT]

Rafi Benkual almost 4 years ago

@David Stingl That first example looks right. There is a scrolltop added to menu can be focussed.

[Edit] Cool glad you got it!

I also suggest people use something like this if the scrolltop is an issue: http://codepen.io/rafibomb/pen/eJVvbx