[Resolved] Margin Top on Anchor

Home Forums Support [Resolved] Margin Top on Anchor

Home Forums Support Margin Top on Anchor

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1107598
    Samuel

    Hi,

    I use the smooth-scroll option for anchor link and a sticky menu. When I put an anchor on accordion items it lands on body part of the accordion and title part is hidden by sticky menu, like shown in link.

    I don’t know if it’s the normal behaviour or not, maybe it is, but if so is there anyway to add a margin-top or something to the landing of the anchor links ?

    thanks !

    #1107933
    Leo
    Staff
    Customer Support

    Hi there,

    Can you confirm that you are using GP’s smooth scroll script?
    https://docs.generatepress.com/article/smooth-scroll/

    If so it should account for the sticky navigation height by default.

    Let me know πŸ™‚

    #1107940
    Samuel

    As I said :

    I use the smooth-scroll option for anchor link”

    Did you check the link I gave to you ?

    I don’t know what to add at what I explained, here it is again : I think anchor in this case is displayed in the body part of accordion, it would explain title is hidden by sticky menu, so I would need to add a margin-top or something similar to add space and be able to see accordion title.

    #1108041
    Leo
    Staff
    Customer Support

    Can you try setting the anchor on the accordion title?

    That’s the only solution I believe.

    Let me know πŸ™‚

    #1108077
    Samuel

    Hi,

    As seen here : https://www.screencast.com/t/S8JIcatuBJL
    The anchor is on the DIV attribute, so it should display title shouldn’t it ?

    According to you there is no way to set a margin-top to the anchor position landing ?

    #1108112
    Leo
    Staff
    Customer Support

    Huh..for some reason I’m seeing different HTML comparing to what you are showing:
    https://www.screencast.com/t/TnXxxcNwqHu

    I’m not seeing the smooth-scroll class or the div ID.

    It’s very hacky to use CSS for anchor position which is why we implemented automatically with the sticky navigation:
    https://generatepress.com/forums/topic/jump-too-anchors-headings-covered-by-stick-navigation/#post-887181

    David provided a workaround/hacky solution here:
    https://generatepress.com/forums/topic/jump-too-anchors-headings-covered-by-stick-navigation/#post-887821

    #1108124
    Samuel

    I found a solution that is working, I apply a class (e.g. “anchor”) to my accordion block and add this CSS :

    .anchor {
    padding-top: 5em;
    margin-top: -5em;
    }

    Adjust as needed.

    Thanks

    #1108125
    Leo
    Staff
    Customer Support

    Glad you found a solution!

    #1108133
    Samuel

    Just to finish about the smooth-scroll, I added the script in my function.php to apply smooth-scroll to every anchor links. So it’s normal you don’t see any class on my DIV or so. πŸ˜‰

    #1108135
    Leo
    Staff
    Customer Support

    Awesome thanks for reporting back πŸ™‚

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