Anchor linking to a section on a new page with a fixed header

Hi Webflowers,

I wonder if you could help me? I am trying to simply anchor link to a section on a new page that has a fixed header.
i understand the link to the section on the other page is straightforward by using an external link including the section id — url/page#section_id —

However I cannot work out how to manipulate the section link so that the top of the section link is not covered by the fixed header. Putting 70 px margin for instance on the top of the section does not do it…
I have also tried disabling scroll offset when fixed, but as there is no offset designed into the header, so this is futile.

Perhaps it’s an easy bit of custom CSS for that page or do I need to set up my header differently. Would really appreciate any wisdom on this. :slight_smile:

The links to the sections are in the hero section on the home page.


[1]: live: http://nma-website.webflow.io/
[2]: Read-only: https://preview.webflow.com/preview/nma-website?preview=d2d42b3c12e0d11d7ef7f1555b044922

Hi anybody out there? no reads or replies in 2 weeks :sweat:
I see there are a lot of similar posts left answered…
I set up a new simple two page website with the same links to anchor to the same sections with a default out of the box header (which I fixed) and its works!
So I got rid of my styled nav bar, put in the same default fixed header and still have the problem.
I have passed this onto a developer and they cannot see the issue. Webflow could really do with a design help support line. I have no way of fixing this without a Webflow expert to talk to it seems.
Would really appreciate some infinite wisdom !

Hi @kohru looking at your example…I can see the jump link (for example Profile) and I can see the issue in preview.

Can you tell me how you are anchoring the jump link on the receiving page? In html you would do something like <a name="development"></a> . Can you point me to where that would be on your page?

Hey @kohru

Try adding a new class with a ::before style to each element that has the height and margin of the fixed header. Place this in the Services page head code.

Here is an example:

.newclass::before {
  content:"";
  display:block;
  height:50px; /* fixed header height*/
  margin:-50px 0 0; /* negative fixed header height */
}
1 Like

Hey @jurbank , thanks so much for getting back to me! I have now re-entered the styling on the site as it was 2 weeks when I first posted so it should be easier to follow now. Please see the problem over these two images that explain where I would like the anchor to be and not to be.



Cheers

1 Like

Hi Kohru, you could link to the container div of each service rather than the title of the service? i.e. have the anchor as the containing div rather than the heading.

Hey @PHRyan

Your method works! all tested, that is awesome thanks !
Out of interest, any idea, why the native Weblfow solution is not working? (from my research… setting the section you are anchoring to Header, to recognise the fixed header should do it…?)
It would be great to also understand the theory of pseudo elements, so I will give this a read… Learning To Use The :after And :before Pseudo-Elements In CSS — Smashing Magazine
Cheers again, I owe you a beer !

1 Like

That’s awesome i’m glad to hear! I am not sure why it doesn’t recognize the header as being the “Top of the page” though. Probably because it is acting as and overlap and not as an element sitting at the highest point or something. But again I am happy it worked out for you!

1 Like

Hi @Sam_Sharpe
I linked the anchor to the section in each case, so that should have worked natively, like you are suggesting.
I set the tag of the anchored section, following advice on another forum feed. But alas it didn’t work. @PHRyan gave me the winning custom code.

2 Likes

*set the tag of the anchored section to ‘header’

Sorry again for it taking 13 days for you to get your answer! A lot of threads pop up on this forum and it is very easy to miss one unfortunately. But never be afraid to post again on your thread to give it a bump back towards the top! We understand that you’re just trying to get some help so that you can continue using this awesome platform :sunglasses:

1 Like

Cheers @PHRyan complete faith in Webflow restored! :sunglasses:

3 Likes

Hi PHRyan,
I have since discovered a slight issue probably in relation to the inclusion of the pseudo element. The name of the page is not being translated correctly to the tab of that page. I have called the name of that page ‘Services’ and the slug is services, however it is showing ‘Profile’ for some reason?
The site is now live and has been transferred to my clients account. The live and read only links are below.

https://preview.webflow.com/preview/ninamurphyassociates?preview=8266b5af08a059a85ae50693c518ad8e


Thanks in advance

Hey @kohru

So your slug isn’t what determines what is show as your title, that would be your title tag! On the page settings for services just open the SEO drop down and change the title to Services:

Great @PHRyan, that was a sloppy assumption by me, thanks for answering that. I shall crack on with the SEO now. Cheers

Hi all,

I’m trying to implement this solution and am stuck. I feel like I’ve followed @PHRyan’s workaround exactly, but it isn’t working for me.

Here is my read-only link:
https://preview.webflow.com/preview/buildbook?utm_source=buildbook&preview=d5dd91fc3a02241d02b99135c6b92626

Here is the link I want to scroll properly, but it isn’t (scrolling 110px too far, which is the height of my fixed navbar header):

Can anyone assist?

Thanks,
Carson

Hey Ryan, I’m facing the same issue and this solution seems perfect. However, I’m a bit new to adding additional code like this. I have your code example placed in my page head, but how do I add a new class with a ::before style to each element?

Hey @kohru - was there anything additional that you added besides the class tag to each element and the head code? This solution is exactly what I need for my site and I can’t get it to work no matter what I try.

hey guys, I just had the same problem and struggled to implement the code. Here is another workaround to fix this problem:

place an empty div inside your section, set position to absolut & set a negative marging with the value of your nav bar height. name the div and set the nav link to it

so you basically just create a random div as an new anchor element and pull it above your section