Offset when using anchor link

[kleeberg]

Hi Zex,

I’m using some anchor links to jump to a specific point on the pages. But it always jumps too low, so that part of the text/images I jump to is too high. I always have to scroll back a bit.

Do you know how to handle this offset?

Thanks again,
Martin

[Zex]

Hello, Martin!

Have you found a solution in the meantime?

Because if you think on the links below the Frontpage boxes, it seems to me that it works as expected.

Regards

[kleeberg]

Hello Zex,

thanks. No, I haven’t found a solution. I tried with CSS, but couldn’t find anything. The problem is the height of the navigation bar on top. This distance is exactly the distance the page is deferred. The anchor works basically well and after jumping to the anchor the page starts exactly on the top of the page. But there is the navigation bar covering the upper part of the image or the text.

So it would be necessary to shift the page down for [height of the navbar]px after jumping. What I tried:

https://fellowtuts.com/html-css/offsetting-anchor-hash-tag-links-to-adjust-for-fixed-header/
https://www.itsupportguides.com/knowledge-base/tech-tips-tricks/how-to-offset-anchor-tag-link-using-css/

but no success. Maybe I’m not using it in the right way.

Thank you and regards,
Martin

[Zex]

Hello, Martin!

I think the next code should help you with that:

#prozessanalyse,#Outsourcing,#cybersecurity{
    
    margin-top: 65px!important;   
}

Regards

[kleeberg]

Hi Zex,

thanks, but I’m afraid it doesn’t work.

Regards

[Zex]

This reply has been marked as private.

[kleeberg]

This reply has been marked as private.

[Zex]

Hi,Martin!

I think I finally found the way to offset the anchor hashtag links.

The way I did this was as follows:

1. Before the actual anchor point I have inserted a blank space row in width of the header(change the height if needed), then gave it anchor ID.

https://prnt.sc/kdwqr3

2. then I Inserted a custom CSS as follows:

/*Offset Anchor*/
:target:before {
content:"";
display:block;
height:65px; 
margin:-65px 0 0;
}

http://prntscr.com/kdwqjc

I hope everything is fine right now.

I will continue tomorrow to solve the problem with the twitch in the menu.

Best Regards

• This reply was modified 4 years, 10 months ago by Zex.

[kleeberg]

Hi Zex,

first of all: thanks again for your efforts. Your service and support is marvellous!

I have to take a closer look at it tomorrow. After the first look there is this 65px gap that you inserted – of course, but now the distance between the two text lines is too large, I guess. It doesn’t look good to me, but maybe jumping to the right spot is more important. As I said, I will get back to this tomorrow.

About the twitching: Seems to be a browser issue. Using Explorer 11 it runs smoothly both ways. Chrome seems to have a problem…

Regards,
Martin

[kleeberg]

Hi Zex,

I finally found a solution that fits best for us. It now has a slight offset on mobile devices, but in the other direction so the image is not cropped.

• No “Additional CSS” necessary
• I inserted a row above with raw HTML: <div id="ANCHORNAME" style="margin-top:-95px;margin-bottom:0px;height:1px;"></div> margin-top should be adjusted as you need it.

  Thanks and regards,
  Martin

[Zex]

I’m Glad, you found a solution that works for you.

Have a nice day!

Best Regards

[Author]

Posts