In the members-only forum a user asked,
Full width primary nav menu wrap in Foodie pro
I'd like to keep it in its current location. In fact, if it's possible, I'd like it to be full width when scrolling. I'm sorry I can't provide de URL, but I have it in a local host.
Thank you for your answer :)
While it is straight forward to make elements sticky or fixed when they are scrolled to using Sticky-Kit, it is slightly tricky to achieve the same with full width requirement in Foodie Pro since the navigation is contained within .site-container which has a max-width.
In this article you can see how the primary nav can be moved from its default location to above the header in Sticky-Kit's sticky_kit:stick event so it appears fixed and 100% wide from browser edge to edge on scroll.
After scrolling down:
We shall limit the scope of this tutorial to non mobile devices.
Step 1
Upload jquery.sticky-kit.min.js to Foodie Pro's assets/js directory.
Create a file named say, non-handhelds.js in the same location having the following code:
Houston, we have a problem!!!
I’ve followed the tutorial and verified several times, but I still get my menu not centered 🙁
It’s actually sticky, but it starts at the left side of the content. I join a picture:
What can I do???
Thank you for your time ♥
Can you provide the URL of your site?
Thank you for this Sridhar! I also don’t seem to be able to make the full width sticky menu center. I see a gap on the left side almost like it can’t completely break out of the site container. here is a url: http://www.flyingfoodninja.com/about/ I commented out the width: 100% !important so it looks better while I figure this out 😉
Thank you as always for a job well done!
Try changing the code in non-handhelds.js to http://pastebin.com/raw/6qTh9PsD.
The tutorial was written with Foodie Pro as it looks in the official demo with before header widget area being used.
Thank you for your reply. Would it be very difficult to also make the sticky navigation work on mobile devices?
Hey Sridhar. You may want to update the code to reflect that the JS is references under /js/ now not /assets/js/ in Foodie 3.0 in line 2 and 16 of Step 2.