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 1Upload 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:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.