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

Fixed Header + Anchor Nav Offset

Question

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

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

Post a link to your page so we can help.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...