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
  • Created
  • Last Reply

Top Posters In This Topic

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.