Fixed Header + Anchor Nav Offset

I'm building on Brine, and I'm using fixed headers.I have no issue with how to make those work, nor with using either

.site {padding-top: 90px;}

or

.index {padding-top: 90px;}

, depending on what's needed.

My issue is that when I have navigation (on index pages) that relies on anchors, like

site.com/#about

, my header covers my headline. I could insert a spacer, but then the site looks oddly spaced and lame.

I can write links with an

<a class="anchor" href:...

and then use the stylesheets to create

.anchor {padding-top: 90px;}

The problem with this solution is that I want for my clients be able to make changes via the standard SS UI, after I hand it off to them. How do I make this work within the existing structure of Squarespace?

Did you ever solve this problem? It is my current issue.

If you share link to your site, we can check easier.

I agree. Any solutions to the question from @QueenBee? Specifically for Brine Index pages with fixed header. 

Can you provide more insight into how / where you add the links? For example, where do you add this code? What do you add after the href: ... ??

<a class="anchor" href:...

Thank you!

Post a link to your page so we can help.

On 3/8/2019 at 3:57 PM, QueenBee said:

I'm building on Brine, and I'm using fixed headers.I have no issue with how to make those work, nor with using either

.site {padding-top: 90px;}

 

or

.index {padding-top: 90px;}

 

, depending on what's needed.

My issue is that when I have navigation (on index pages) that relies on anchors, like

site.com/#about

 

, my header covers my headline. I could insert a spacer, but then the site looks oddly spaced and lame.

I can write links with an

<a class="anchor" href:...

 

and then use the stylesheets to create

.anchor {padding-top: 90px;}

 

 

The problem with this solution is that I want for my clients be able to make changes via the standard SS UI, after I hand it off to them. How do I make this work within the existing structure of Squarespace?

I'm having the same issue on 7.1.  I have chosen the option for fixed header and having the same issue.

I think I understand what you're attempting to do... when anchor is activated, add some padding.

Could you elaborate on the HTML and CSS?  Unfortunately I am really a rookie with these two and am not sure how to make it work.

Did anyone end up solving this? I am struggling with this right now and it's frustrating me to the point I feel like removing the fixed header from the Brine template. Can someone please help?

On 11/20/2020 at 5:06 PM, Kuda said:

Did anyone end up solving this? I am struggling with this right now and it's frustrating me to the point I feel like removing the fixed header from the Brine template. Can someone please help?

Can you share site url? We can check easier

20 hours ago, tuanphan said:

Can you share site url? We can check easier

https://rose-octahedron-r9ek.squarespace.com/respire

Password: 12345

15 hours ago, Kuda said:

https://rose-octahedron-r9ek.squarespace.com/respire

Password: 12345

Remove the code

.Header.Header--top {
    position: fixed;
    top: 0px;
    z-index: 1000;
    width: 100%;
}

Add new code

.Header.Header--top {
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    z-index: 1000;
    width: 100%;
}