Anchored Headings covered by stick Sticky Menu

  • Resolved jeremyofmaine

    (@jeremy6857)


    3 years, 8 months ago

    My main nav links to headings with anchors in this single page website. I have enabled the sticky menu. However, now when you click on an item in the main nav, it scrolls down too far and the menu obscures the heading.

    I added a class “anchor” to the heading like this: https://share.getcloudapp.com/o0u8gQwe

    And tried this bit of code as suggested in a similar post online, but to no avail.

    a.anchor {
position: relative;
top:-100px;
display: block;
height: 0;
width:0;
}
    • This topic was modified 3 years, 8 months ago by jeremyofmaine.

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

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

    (@twentig)

    3 years, 8 months ago

    Hi Jeremy,

    Sticky header and anchors links are always complicated. There’s a new CSS property scroll-margin-top, but it’s currently not supported by all Web browsers (Safari and IE11).

    Otherwise, you can test the following CSS code (it might need some adjustments to fit your website):

    h2::before {
    content: '';
    display: block;
    position: relative;
    width: 0;
    height: 100px;
    margin-top: -100px;
}

    I hope the above is useful to you.
    Have a nice day.

    Thread Starter jeremyofmaine

    (@jeremy6857)

    3 years, 8 months ago

    That’s great! Thank you!

    Plugin Author Twentig

    (@twentig)

    3 years, 8 months ago

    Great!

    If you enjoy Twentig, please leave us a review. 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Anchored Headings covered by stick Sticky Menu’ is closed to new replies.