Fixed Header for Kent Template?

Is there code specific to the Kent Template that can fix the header?  Thank you for any help you can give me on this. 

Hi. You mean sticky header on scroll? Have you tried Edit Site Header >> Enable Fixed Header yet?

Thank you for responding. Yes, sticky header on scroll. Unfortunately I don't see the "enable fixed header" option. I looked/and searched in site styles but maybe I'm looking in the wrong spot.

21 hours ago, tuanphan said:

Hi. You mean sticky header on scroll? Have you tried Edit Site Header >> Enable Fixed Header yet?

Thank you for responding. Yes, sticky header on scroll. Unfortunately I don't see the "enable fixed header" option. I looked/and searched in site styles but maybe I'm looking in the wrong spot.

On 5/25/2021 at 5:38 AM, jcapozzola said:

Thank you for responding. Yes, sticky header on scroll. Unfortunately I don't see the "enable fixed header" option. I looked/and searched in site styles but maybe I'm looking in the wrong spot.

ah sorry, I thought Kent belongs Squarespace 7.1.

Can you share link to your site or Kent template demo? We will take a look

On 5/26/2021 at 4:54 AM, tuanphan said:

ah sorry, I thought Kent belongs Squarespace 7.1.

Can you share link to your site or Kent template demo? We will take a look

Sure! jencapozzola.com

21 hours ago, jcapozzola said:

Sure! jencapozzola.com

Add to Design > Custom CSS

/* stickyk header */
header#header {
    position: sticky;
    position: -webkit-sticky;
    top: 20px;
    z-index: 999;
}

8 hours ago, tuanphan said:

Add to Design > Custom CSS

/* stickyk header */
header#header {
    position: sticky;
    position: -webkit-sticky;
    top: 20px;
    z-index: 999;
}

 

That worked! Thank you!  I do have a follow up if you don't mind...is there a way for the header color to be solid and not transparent so that the words are easy to see instead of overlapping with content that scrolls under it?

On 5/29/2021 at 1:34 AM, jcapozzola said:

That worked! Thank you!  I do have a follow up if you don't mind...is there a way for the header color to be solid and not transparent so that the words are easy to see instead of overlapping with content that scrolls under it?

 

Your header is not fullwidth, so need to some code to tweak it.

Do you use Personal or higher plan? Each plan will have a different code

On 5/30/2021 at 1:51 PM, tuanphan said:

Your header is not fullwidth, so need to some code to tweak it.

Do you use Personal or higher plan? Each plan will have a different code

I used this:

/* stickyk header */
header#header {
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
  bottom: 30px;
    z-index: 999;
  background: white;
}

on this site https://www.i-sea.ca/
however @tuanphan I'd like a subtle shadow on the bottom border that shows ONLY upon scrolling so can you provide the code for that? I tried the same code I used on this 7.1 site https://www.2chanceranch.ca but it's a boxed shaddow which on the kent template adds a shadow on all 4 sides... help? thanks!

On 9/24/2021 at 3:07 AM, jaisequoia said:

I used this:

/* stickyk header */
header#header {
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
  bottom: 30px;
    z-index: 999;
  background: white;
}

on this site https://www.i-sea.ca/
however @tuanphan I'd like a subtle shadow on the bottom border that shows ONLY upon scrolling so can you provide the code for that? I tried the same code I used on this 7.1 site https://www.2chanceranch.ca but it's a boxed shaddow which on the kent template adds a shadow on all 4 sides... help? thanks!

Can you share site url? We can check easier

19 hours ago, tuanphan said:

Can you share site url? We can check easier

https://www.i-sea.ca/ on mobile it would be great if it didnt hide the menu when it became sticky. check it out and you'll see what I mean. Thanks Tuan! Hope all is well with you.

On 9/26/2021 at 2:53 AM, jaisequoia said:

https://www.i-sea.ca/ on mobile it would be great if it didnt hide the menu when it became sticky. check it out and you'll see what I mean. Thanks Tuan! Hope all is well with you.

Add bottom box shadow for header on scroll? With SS 7.1, when scroll, SS add class: shrink to header, so we can target sticky header easily. SS 7.0 have no that.

If you use a Business Plan or higher, we will use JavaScript code to add this class

11 hours ago, tuanphan said:

Add bottom box shadow for header on scroll? With SS 7.1, when scroll, SS add class: shrink to header, so we can target sticky header easily. SS 7.0 have no that.

If you use a Business Plan or higher, we will use JavaScript code to add this class

Never mind Tuan. It's fine for now. I think I'll be updating them to Brine (Kent is the current template and it's really limited). Appreciate the help you offered though.