Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Fixed Header for Kent Template?


jcapozzola

Question

  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

13 answers to this question

Recommended Posts

  • 0

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.

Link to comment
  • 0
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.

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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?

 

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

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