-
Replies
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.
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
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.