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.
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.
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?
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.
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.
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;}Nice! Thanks for sharing.
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.
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 :)