X Pro Sticky Header overlaps content with 1 page nav

[armillaria]

Seems to be a known issue, but I can’t find a resolution.

Site is https://sphaera.wpengine.com

We are using the IDs as required as page anchors in the navigation, but in linking to them, it’s rolling that anchor up behind the nav.

I believe there is a coherent way to handle this in the pro header settings (that doesn’t require either a JS or CSS hack), but I can’t figure it out.

Note: we have two menus - the home menu is a hero header, the subsequent page menu contains the same first bar as the home menu, but does the same thing when tested on the home page.

You can see the other menu at https://sphaera.wpengine.com/blog

Any and all wisdom appreciated

[Zahnarzt_Helden]

You can use a special CSS class to overcome this issue.
Add the following code in the global CSS block and assign the class jumptarget via Customize to your headlines/sections.

/* add class="jumptarget" to all targets. */
.jumptarget::before {
  content:"";
  display:block;
  height:110px; /* fixed header height*/
  margin:-110px 0 0; /* negative fixed header height */
}

[armillaria]

Thanks so much for this.
I have applied this CSS and added the class to the targets, but it’s still misfiring.
Any further suggestions?

[emile]

Hi there, I am experiencing the same issue. I’ve searched the forum and found out that other users have been experiencing the same issue for a few months now. Any working solution?
Thanks!

current url is http://ayurvedamb.ca

[armillaria]

Check the themeco response here: https://theme.co/apex/forum/t/sticky-header-overlaps-1-page-content-using-section-id-for-nav/21725?u=icologi