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?

Edited by QueenBee
Initial Revision
Link to comment
  • 1 year later...
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

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