Streaming live at 10am (PST)

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


#1

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


#2

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 !


#3

Hi @kohru looking at your example…I can see the jump link (for example http://nma-website.webflow.io/services#development) 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?


#4

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 */
}

#5

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


#6

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.


#7

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… https://www.smashingmagazine.com/2011/07/learning-to-use-the-before-and-after-pseudo-elements-in-css/
Cheers again, I owe you a beer !


#8

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!


#9

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.


#10

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


#11

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:


#12

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


#13

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://www.ninamurphyassociates.co.uk/services
https://preview.webflow.com/preview/ninamurphyassociates?preview=8266b5af08a059a85ae50693c518ad8e


Thanks in advance


#14

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:


#15

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