Offset when using anchor link
- This topic has 10 replies, 2 voices, and was last updated 4 years, 10 months ago by
Zex.
-
AuthorPosts
-
August 1, 2018 at 6:55 pm #9987
kleeberg
ParticipantHi 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,
MartinAugust 2, 2018 at 11:51 am #9992Zex
ModeratorHello, 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
August 2, 2018 at 1:43 pm #9999kleeberg
ParticipantHello 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,
MartinAugust 2, 2018 at 3:25 pm #10001Zex
ModeratorHello, Martin!
I think the next code should help you with that:
#prozessanalyse,#Outsourcing,#cybersecurity{ margin-top: 65px!important; }
Regards
August 2, 2018 at 3:32 pm #10002kleeberg
ParticipantHi Zex,
thanks, but I’m afraid it doesn’t work.
Regards
August 2, 2018 at 3:45 pm #10003Zex
ModeratorThis reply has been marked as private.August 2, 2018 at 4:09 pm #10004kleeberg
ParticipantThis reply has been marked as private.August 2, 2018 at 6:48 pm #10008Zex
ModeratorHi,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.
2. then I Inserted a custom CSS as follows:
/*Offset Anchor*/ :target:before { content:""; display:block; height:65px; margin:-65px 0 0; }
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.
August 2, 2018 at 7:38 pm #10011kleeberg
ParticipantHi 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,
MartinAugust 3, 2018 at 11:42 am #10014kleeberg
ParticipantHi 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
August 3, 2018 at 11:45 am #10016Zex
ModeratorI’m Glad, you found a solution that works for you.
Have a nice day!
Best Regards
-
This reply was modified 4 years, 10 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.