Jump to content

How to freeze only my nav bar on mobile & desktop view?

Recommended Posts

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!!

Screen Shot 2021-01-28 at 8.26.22 AM.png

Link to comment
  • Replies 13
  • Views 887
  • Created
  • Last Reply

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>

image.thumb.png.c00e343da5a5097bb04b732c69e9532e.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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"? 

Screen Shot 2021-02-08 at 8.43.55 PM.png

Screen Shot 2021-02-08 at 8.44.03 PM.png

Link to comment

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.