Make a sticky menu with Basil template

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

Website Password: lachose

hey there,
I would like to know how to add a sticky menu to the Basil template with CSS/PHP

Could you help me?

Add to Home > Design > Custom CSS

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

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?

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?

5 minutes ago, tuanphan said:

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

Business

up please 🙂

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;
}

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

up please

On 4/30/2020 at 10:50 PM, mtaddict said:

up please

Seems fine here. Did you solve?

5 hours ago, tuanphan said:

Seems fine here. Did you solve?

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

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>

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

Would you mind posting your solution? From checking out the site, it looks like it's working well.

2 hours ago, mitosan said:

Would you mind posting your solution? From checking out the site, it looks like it's working well.

Can you share site url? We can help easier

Quote

Can you share site url? We can help easier

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.

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?

Hello,

Is there any way to do the sticky header go from transparent at the top to black with white writing when scrolling down please?

Thanks!

www.crownvideos.co.uk

Solved!

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?

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

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

On 4/23/2020 at 6:04 AM, mtaddict said:

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

Website Password: lachose

hey there,
I would like to know how to add a sticky menu to the Basil template with CSS/PHP

Could you help me?

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

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