Jump to content

Make a sticky menu with Basil template

Recommended Posts

  • Replies 21
  • Views 1.5k
  • Created
  • Last Reply
2 minutes ago, mtaddict said:

Thank you, it works, but how could it be possible to make the sticky menu with a white background, black font and little bit smaller than the "normal" menu?

It needs JavaScript. Which plan do you use? Personal or Ecommerce?

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

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 10;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header.Header').addClass('tuan');
        }
        else {
            $('header.Header').removeClass('tuan');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>

next, add this to Home > Design > custom CSS

/* set background */
.tuan {
    background: white !important;
}
/* set font color */
.tuan * {
    color: black !important;
}

 

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
On 4/25/2020 at 10:17 AM, tuanphan said:

Add to Home > Settings > Advanced > Code Injection > Footer


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 10;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header.Header').addClass('tuan');
        }
        else {
            $('header.Header').removeClass('tuan');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>

next, add this to Home > Design > custom CSS


/* set background */
.tuan {
    background: white !important;
}
/* set font color */
.tuan * {
    color: black !important;
}

 

That doesn't work properly, please check the website: 

https://bisourouen.squarespace.com/

Website Password: lachose

Link to comment
On 5/3/2020 at 2:20 AM, mtaddict said:

Not at all... You don't see it doesn't work? 😕

Add to Code Injection Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 10;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header.Header').addClass('tuan');
        }
        else {
            $('header.Header').removeClass('tuan');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  .tuan {
  	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
</style>

 

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
On 5/5/2020 at 2:11 PM, tuanphan said:

Add to Code Injection Header


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(function(){
 var visibleTop = 10;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header.Header').addClass('tuan');
        }
        else {
            $('header.Header').removeClass('tuan');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  .tuan {
  	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
</style>

 

Hello, I putted this in the header injection code section, and my custom css is 

header.Header.Header--bottom.Header--overlay {
    position: -webkit-sticky;
    position: sticky;
}

/* set background */
.tuan {
    background: white !important;
}
/* set font color */
.tuan * {
    color: black !important;
}

but as you can see, that doesn't work properly... a lot of bugs...

Site URL: https://bisourouen.squarespace.com/

Website Password: lachose

Link to comment
  • 8 months later...
On 1/26/2021 at 11:22 AM, mitosan said:

https://bisourouen.squarespace.com/ was the original site I believe. I'm just wondering what their solution was to the sticky header issue was, because it looks like it is working correctly on their site.

It looks like you solved?

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
  • 2 months later...
On 4/21/2021 at 11:59 PM, crownvideos said:

Solved!

Do you want to fix these?

Site URL – https://www.crownvideos.co.uk/

1. (Tablet-Footer) Want to change to 2 columns/row on tablet?

crownvideos.co_.uk-01-min.png

2. (Mobile-Footer) Reduce space between E11 – Social icons?

crownvideos.co_.uk-02-min.png

3. (Tablet-Header) Nav has 4 items only. Want to force desktop nav on tablet?

crownvideos.co_.uk-03-min.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
  • 1 month later...
9 hours ago, j_appleseed said:

 

Hi mtaddict, can you share how you solved your initial question in this post? I have the same problem I'd like to solve. Many thanks!

Philip

Can you share your site url? We can take a look

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

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.