This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Compensating for Sticky Menu on Anchor Links

Resolved 8 replies premiumthemetheme-vantage
Hentai
11 years ago · Last reply by Andrew Misplon 10 years ago

So I am using Vantage Premium with the responsive menu set to be ‘sticky’ and I am having a problem with anchor linked content being hidden under the menu.

I read some tips on using CSS to compensate but I am having a hard time getting it to work with the Vantage theme. Almost all of my anchors are on H3 header tags.

Thanks in advance.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

8
  1. Andrew Misplon Staff 11 years, 8 months ago

    Hi

    Are you using Appearance > Home Page or another page running Page Builder. If so, Page Builder uses ID’s for it’s panels and panel grid cells. For example this is panel grid cell ID: pgc-home-0-0. Linking to that instead of the H tag should avoid the issue you’re seeing.

  2. Hentai 11 years, 8 months ago

    Aha, I have a really long document with several headings.

    I wanted to add a Table of Contents to the top which is why I was linking to anchors on the same page. Used the IDs on the H tags because they were the most relevant to the table of contents but if I have to use a different tag as an anchor I am open to it.

    What do you recommend in this situation?

  3. Greg Priday Staff 11 years, 8 months ago

    Hi Hentai

    I’ll look into a solution to this. It might require some additional javascript in Vantage itself. I do see this as a potential issue that should be fixed.

  4. Andrew Misplon Staff 11 years, 8 months ago

    One page websites with a sticky menu usually use a Javascript offset to get around this issue.

    Here is a possible solution you could use: http://www.pixelflips.com/blog/anchor-links-with-a-fixed-header/.

    “First, I moved the id’s of each section to a new element: (a span in this case)”
    “The new elements were added right above each section and would serve as the new anchor point. I’m not the biggest fan of empty elements on a page, but it does address the issue.”

    Hope that helps.

  5. pelsar 10 years, 11 months ago

    this worked on one of my sites but not on a second one…

    placed in the CSS

    /* move anchor down */
a.anchor{
  display: block; 
  position: relative; 
  top: -150px; 
  visibility: hidden;
}
    • Andrew Misplon Staff 10 years, 11 months ago

      Nice! Thanks for sharing.

  6. Jonathan Chase 10 years, 8 months ago

    Don’t know if this has been resolved elsewhere but I did it this way. For this page
    http://hypnoarts.net/theHypnotist/hypnotist-shows-jonathan-chase/
    I have a contents menu at the top and simply put the anchor link at the bottom of the preceding row or widget.

    Rows are set with no bottom border and a bottom border in black for definition, works amazingly well on mobile devices. by the way guys, The Premium Vantage is awesome as is the builder. Great work.

    • Andrew Misplon Staff 10 years, 8 months ago

      Hi Jonathan

      Really glad to hear Vantage has been working out for you. Thanks for sharing your simple solution for the offset problem.

      All the best :)

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread