Support » Plugin: Sticky Menu & Sticky Header » Sticky Menu conflicts with internal links on page

  • Resolved papijo

    (@papijo)


    WordPress Version 5.7.2
    Using the Gutenberg editor
    Sticky Menu Version 2.31

    I’ve been using Sticky Menu on my garden site with success for some time. But recently noticed that it conflicts with internal links, as is demonstrated on the linked URL.
    When clicking an internal link, the user is taken exactly 6 lines lower than the corresponding HTML anchor.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Alexandru Tapuleasa

    (@talextech)

    Hi,

    Thank you for using WP Sticky!
    In theory, there is not issue. The browser scrolls you to the anchor that you a linking to. But since the sticky menu is, well.. sticky, above the content, the anchor and first lines after it are actually under the sticky menu.
    So you would have to offset your anchors to compensate for the height of the header. This explains a similar issue and provides a solution.
    https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header

    I do not have a simpler solution for you unfortunately ๐Ÿ™

    Thread Starter papijo

    (@papijo)

    Hi @talextech and thanks for the super fast reply!
    I’ve been to the stackoverflow link you suggest and have adapted it to my website and I’m glad to report that it works fine. Here is my adaptation, as can now be seen at https://www.rezeau.org/wp-garden/en/testing-sticky-menu-internal-links-2/
    Instructions for pages created with the WP Gutenberg editor.
    1.- In your site’s styles.css file, add this rule:

    .anchor {
        display: block;
        position: relative;
        top: -90px; //you may need to adapt this value to your own site
        visibility: hidden;
    }

    2.- When editing a page with internal links:
    Just before the paragraphs that you want internally linked, add one line/paragraph and enter any text, preferably the name of your anchor. On the right, in the editor Block Advanced HTML anchor, enter the anchor name, in the Additional CSS class(es) field enter anchor (the name of your anchor class)
    Then, at the top of your page, in your “internal links list”, enter the anchor names as usual.

    I’m glad I can continue to use WP Sticky and insert internal links on my site pages.

    Plugin Author Alexandru Tapuleasa

    (@talextech)

    Awesome! Thank you for posting your solution! I’m sure it will help other people ๐Ÿ™‚

    If you have a minute, please leave a review. Itโ€™s what keeps support going. Thank you ๐Ÿ™ https://wordpress.org/support/plugin/sticky-menu-or-anything-on-scroll/reviews/#new-post

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