Shop Categories

X

Offset when using anchor link

Home Forums Agama Pro Offset when using anchor link

Topic Resolution: Resolved
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #9987
    kleeberg
    Participant

    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

    #9992
    Zex
    Moderator

    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

    #9999
    kleeberg
    Participant

    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

    #10001
    Zex
    Moderator

    Hello, Martin!

    I think the next code should help you with that:

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

    Regards

    #10002
    kleeberg
    Participant

    Hi Zex,

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

    Regards

    #10003
    Zex
    Moderator
    This reply has been marked as private.
    #10004
    kleeberg
    Participant
    This reply has been marked as private.
    #10008
    Zex
    Moderator

    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.
    #10011
    kleeberg
    Participant

    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

    #10014
    kleeberg
    Participant

    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

    #10016
    Zex
    Moderator

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

    Have a nice day!

    Best Regards

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.