Jump to content

Fixed Header + Anchor Nav Offset

Recommended Posts

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?

Link to comment
  • 1 year later...
  • Replies 9
  • Views 1.6k
  • Created
  • Last Reply
  • 2 weeks later...

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!

Link to comment
  • 3 months later...
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.

Link to comment
  • 1 month later...

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?

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

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
15 hours ago, Kuda said:

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

 

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.