Hi, can the experts help me out here, when I click on any anchor links (try the icon buttons on the sidebar), it jumps to element but is chopped off/covered by header(I used basic template with a sticky header), how do I fix this or add height to it so it properly displays after the header?
It’s supposed to jump/scroll to the title of each clicked element
Click on link below
MG EXIA BLUE TRANS-AM - Showcase: Masterpiece - Kenzbuilds: All About Gundam Modelling 2.0
Many thanks
Hi @Kenwin_Z,
What’s happening:
You have a spacer div first
<div class="ed-element ed-spacer" id="ed-207723615"></div>
And the element you’re linking to (the one with the random id) is the next div:
<div class="ed-element ed-container wv-overflow_visible" id="ed-207724779">
Your header is sticky/fixed.
When the browser jumps to #ed-207724779, it scrolls so that that exact div hits the very top of the viewport. But your sticky header is sitting there, so it covers the top part. The spacer you added is above the target, so it doesn’t help — the scroll goes straight to the element with the ID, not to the spacer.
So the short version:
You put the anchor/id on the element that starts right under the header, not on the element that has some space above it — so the sticky header overlaps it.
Ways to fix in Sitejet:
Put the ID on the spacer (or on the wrapper above the spacer) instead of on the inner container.
Or add global CSS like:
:target {
scroll-margin-top: 90px; /* use your header height */
}
(That tells the browser “when I scroll to an anchor, leave 90px at the top.”)
That’s why it “lands like screenshot one” — the scroll position is correct for a normal page, but your sticky header steals the space.
This is why I like the community 
Thank you so much, solved my headache
