Adjusting header/page margins when using anchor links

Add Code Block > Add this

Quote

<span id="abcxyz"></span>

then use anchor link with this id.

Doesn't work, it's worst than before 😕

Up please

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.

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

On 10/8/2020 at 7:11 AM, mtaddict said:

Doesn't work... sorry...

Do you still need help on this?

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?

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.

@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  

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?

21 hours ago, tuanphan said:

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

Yes, I do. thanks tuanphan

@tuanphan Me too, my original question is not answered.

https://earthworm-mustard-2z3y.squarespace.com/

PW: Daisy!

On 11/24/2020 at 9:40 PM, JayHuggins said:

@tuanphan Me too, my original question is not answered.

https://earthworm-mustard-2z3y.squarespace.com/

PW: Daisy!

Hi. Sorry, just had a sick. Do you still need help on this?

Not an answer per se.

Would it be possible to update the script provided by SQS to incorporate an offset? Any attempt using additional js is messing with the functionality for mobile. The aim is to have a working anchor link navigation for desktop and mobile, given that the website is a one-pager with a fixed header (different height for mobile and different sizes of browser windows).

the solution below works for a website without a fixed header:

The following code is an attempt to enable the offset independently:

<script>
$(document).ready(function(){  
var Anchors = document.getElementsByTagName("a");
for (var i = 0; i < Anchors.length ; i++) {
    Anchors[i].addEventListener("click", 
        function (event) {
            event.preventDefault();
            if (confirm('Are you sure?')) {
                //window.location = this.hash;
                var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;
                var custom_offset = 210;
                $('html, body').animate({scrollTop:target_offset - custom_offset}, 500);
            }
        }, 
        false);
}
});
</script>

Putting the IDs (#) in different places to counterbalance the offset is an absolute last resort. A coded solution is much preferred.