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

Adjusting header/page margins when using anchor links


mtaddict

Question

Site URL: https://bisourouen.fr

(password: lachose)

Hi,

I'm using anchor links on all my pages, but due to the header/nav bar being fixed, the top part of any page (from where anchor link jumps to) is hidden beneath the header/nav bar. So I would like any anchor links to point to the top of any page.

I'm using anchor links like this: url with # to the slug url of any page.

Any suggestions for how to change this please? Website isn't public yet and using the Version 7.0- famille Brine (template Basilic).

Thanks

Edited by mtaddict
minor change
Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 0

Hi @mtaddict

I believe I have a solution. Try this:

You'll need to add custom css code, but it's fairly simple to do.

I'm normally a Wordpress designer where I've used variations of this solution. I tested this solution on a demo SS site and it seems to be working thus far.

------------------

First, for those who haven't already, they'll need to add the anchor tags/links using IDs to the sections.
To do this, you need to add anchor tags/links using IDs to the sections on the page as follows:
https://fatcat.agency/squarespace-adding-anchor-links-using-IDs

  • Go to the section you want to hyperlink to;
  • Hover over the top of the section
  • Look for the horizontal teardrop, and click on it.
  • Search for html
  • Click on code
  • Wipe out the sample code
  • Enter your code as follows:
<a id="name-of-your-section"></a>
  • where name-of-your-section is replaced by your section name.
  • No spaces, no underscores, all lowercase.
  • Save.
  • Next, you'll want to add the section as a link to your navigation (or wherever you wish).
  • Add the option of "link" and use the following as the hyperlink:
#name-of-your-section
  • where you name-of-your-section is replaced by your section name, preceded by the pound sign.

Request to the SquareSpace improvement team: Is there to add custom IDs to each section? This is a basic feature even of Weebly, and it would make the process even easier to implement, and since SS is targeting web designers as well as DIY-ers, it makes sense to have this as a feature. If it's in place, please advise.

-------------------------------  

Next, how to offset the anchor links to accommodate the height of your header:

If you look at the link provided, there is CSS code as follows:

:target:before {
content:"";
display:block;
height:90px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}

Depending upon the height of your header (including any above-header you may have), you'll want to adjust the px height and negative margin height.

So, you'll want to add the code to custom CSS, with those numbers adjusted. I've created a screencast showing you how:

https://fatcat.agency/squarespace-offset-hyperlinks-for-header-height

  • Go to Design mode
  • Click on Custom CSS
  • Copy the code noted above to a text editor, then paste it into the Custom CSS field.
  • Save.
  • Test the result.
  • If you need to adjust the height, you will want to change the px height in both lines of code. For example, in my demo I changed 90px to 120px, for both height and margin, like so:

height:120px; /* fixed header height*/
margin:-120px 0 0; /* negative fixed header height */

  • This number will vary, depending upon the height of your header. 
  • Be sure to ONLY change the number; leave the px and the rest of the code in place. Do not remove the minus symbol from the margin setting.

 



 

Edited by fatcatdesign
clarification and additional steps
Link to post
  • 0
On 10/5/2020 at 9:49 PM, fatcatdesign said:

Hi @mtaddict

I believe I have a solution. Try this:

You'll need to add custom css code, but it's fairly simple to do.

I'm normally a Wordpress designer where I've used variations of this solution. I tested this solution on a demo SS site and it seems to be working thus far.

------------------

First, for those who haven't already, they'll need to add the anchor tags/links using IDs to the sections.
To do this, you need to add anchor tags/links using IDs to the sections on the page as follows:
https://fatcat.agency/squarespace-adding-anchor-links-using-IDs

  • Go to the section you want to hyperlink to;
  • Hover over the top of the section
  • Look for the horizontal teardrop, and click on it.
  • Search for html
  • Click on code
  • Wipe out the sample code
  • Enter your code as follows:

<a id="name-of-your-section"></a>
  • where name-of-your-section is replaced by your section name.
  • No spaces, no underscores, all lowercase.
  • Save.
  • Next, you'll want to add the section as a link to your navigation (or wherever you wish).
  • Add the option of "link" and use the following as the hyperlink:

#name-of-your-section
  • where you name-of-your-section is replaced by your section name, preceded by the pound sign.

Request to the SquareSpace improvement team: Is there to add custom IDs to each section? This is a basic feature even of Weebly, and it would make the process even easier to implement, and since SS is targeting web designers as well as DIY-ers, it makes sense to have this as a feature. If it's in place, please advise.

-------------------------------  

Next, how to offset the anchor links to accommodate the height of your header:

If you look at the link provided, there is CSS code as follows:


:target:before {
content:"";
display:block;
height:90px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}

Depending upon the height of your header (including any above-header you may have), you'll want to adjust the px height and negative margin height.

So, you'll want to add the code to custom CSS, with those numbers adjusted. I've created a screencast showing you how:

https://fatcat.agency/squarespace-offset-hyperlinks-for-header-height

  • Go to Design mode
  • Click on Custom CSS
  • Copy the code noted above to a text editor, then paste it into the Custom CSS field.
  • Save.
  • Test the result.
  • If you need to adjust the height, you will want to change the px height in both lines of code. For example, in my demo I changed 90px to 120px, for both height and margin, like so:

height:120px; /* fixed header height*/
margin:-120px 0 0; /* negative fixed header height */

  • This number will vary, depending upon the height of your header. 
  • Be sure to ONLY change the number; leave the px and the rest of the code in place. Do not remove the minus symbol from the margin setting.

 



 

Doesn't work... sorry...

Link to post
  • 0
On 10/5/2020 at 3:49 PM, fatcatdesign said:

<snip>

Next, how to offset the anchor links to accommodate the height of your header:

If you look at the link provided, there is CSS code as follows:


:target:before {
content:"";
display:block;
height:90px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}

Depending upon the height of your header (including any above-header you may have), you'll want to adjust the px height and negative margin height.

So, you'll want to add the code to custom CSS, with those numbers adjusted. I've created a screencast showing you how:

https://fatcat.agency/squarespace-offset-hyperlinks-for-header-height

  • Go to Design mode
  • Click on Custom CSS
  • Copy the code noted above to a text editor, then paste it into the Custom CSS field.
  • Save.
  • Test the result.
  • If you need to adjust the height, you will want to change the px height in both lines of code. For example, in my demo I changed 90px to 120px, for both height and margin, like so:

height:120px; /* fixed header height*/
margin:-120px 0 0; /* negative fixed header height */

  • This number will vary, depending upon the height of your header. 
  • Be sure to ONLY change the number; leave the px and the rest of the code in place. Do not remove the minus symbol from the margin setting.

@fatcatdesign

I've implemented the offset code above and adjusted for Header height but the first time I click an anchor link in the header, the anchored section goes a few pixels too high. If I click another anchor link for the same page, the section section scrolls to the right place.

I don't understand why it's wrong the first time but right on subsequent clicks?

Link to post
  • 0

Couldn't you just use the "PAGE" option in the link editor instead of the anchor link using the Web address?  The page option takes you to the top of that page you select.

Link to post
  • 0

@tuanphan I am having a similar problem. Using Squarespace 7.0 Brine template with index navigation and fixed header that becomes smaller using jQuery. 

problem: Every time I click on index navigation to scroll down to a page, it off by the size of head due to its fixed nature. Please let me know if something can be done.  

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

password: 12345  

Link to post
  • 0
On 11/19/2020 at 8:11 PM, Kuda said:

@tuanphan I am having a similar problem. Using Squarespace 7.0 Brine template with index navigation and fixed header that becomes smaller using jQuery. 

problem: Every time I click on index navigation to scroll down to a page, it off by the size of head due to its fixed nature. Please let me know if something can be done.  

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

password: 12345  

Hi. Missing your notification. Do you still need help on this?

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

-- Pour your heart into it

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