KLantz Posted January 28, 2021 Share Posted January 28, 2021 Site URL: https://www.twoofakindrentals.com/ Hello! See attached for a screen shot of my website navigation circled in red that i'd like to freeze on mobile & desktop view. When people are scrolling on my site I need just this bar (circled in red) to stay at the top of the page so customers can easily navigate to other pages without scrolling back up to the top again. I only want the navigation bar circled in red to be frozen, not the company logo. How would I go about this? And is it possible for mobile too? Thank you!! Link to comment
KLantz Posted January 29, 2021 Author Share Posted January 29, 2021 Bump- thank you!! Link to comment
KLantz Posted February 1, 2021 Author Share Posted February 1, 2021 Hi Admins, Is there someone available to advise for this? I'd appreciate it so much! Thank you! Link to comment
KLantz Posted February 3, 2021 Author Share Posted February 3, 2021 Hello, can anyone help? Link to comment
tuanphan Posted February 4, 2021 Share Posted February 4, 2021 Try adding this codeto LAST LINE in Settings > Advanced > Code Injection > Footer <script> $(function(){ var visibleTop = 210; $(window).scroll(function() { var scroll = getCurrentScroll(); if ( scroll >= visibleTop ) { $('.header-nav').addClass('tuan'); } else { $('.header-nav').removeClass('tuan'); } }); function getCurrentScroll() { return window.pageYOffset || document.documentElement.scrollTop; } }); </script> and add this to Code Injection> Header <style> div.header-nav.tuan { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background: white !important; margin-top: 0 !important; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
KLantz Posted February 9, 2021 Author Share Posted February 9, 2021 Thank you so much for the response! I just implemented this code and it looks great. There is however one issue. "Packages" on my menu navigation is a Mega Menu. When you click it a Mega Menu will drop down and three images appear. When I add your code to allow the menu to stay at the top of the page, the Mega Menu disappears from "Packages." Is there a way I can keep your code and keep the Mega Menu for "Packages"? Link to comment
KLantz Posted February 9, 2021 Author Share Posted February 9, 2021 I would like to make all of the menu links mega menus in the future. So I would like the mega menu to work with the code that you recently gave me. Please let me know what adjustments are needed. Thanks! Link to comment
KLantz Posted February 9, 2021 Author Share Posted February 9, 2021 @tuanphan please advise thank you Link to comment
KLantz Posted February 10, 2021 Author Share Posted February 10, 2021 Hello- Can you please advise please? Link to comment
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 Do you still need help on this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
KLantz Posted February 15, 2021 Author Share Posted February 15, 2021 Hello! Yes I do. On my website the header is frozen on the top of the page as you scroll down, but as you see with the link "Packages" on the header that's a Mega Menu, this mega menu doesn't work as you scroll down the page. In the future I will make all of my header navigation links mega menus. Can you tell me how this frozen header menu that you made for me can work with a mega menu? Link to comment
KLantz Posted February 16, 2021 Author Share Posted February 16, 2021 Hello @tuanphan Link to comment
KLantz Posted February 23, 2021 Author Share Posted February 23, 2021 @tuanphan Please advise thank you! Link to comment
tuanphan Posted March 1, 2021 Share Posted March 1, 2021 Answered your email. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment