I run a small website (www.binnenstadduurzaam.nl) using Elementor Pro and OceanWP, and have a parallel test site test.binnenstadduurzaam.nl, which is the same as the www site except when I am testing a new function or feature.
My sites have a fixed header, so when I jump to a menu-anchor I need a vertical offset. On the test site I implemented this by adding
offst as class of all anchors, and the following CSS:
It worked fine on the test site, so I implemented it on the www site and it didn't work -- no offset at all. I have a workaround, using the following HTML instead of the Anchor-Heading pair:
and this works fine, but is of course a hack (and a maintenance nightmare).
For certainty I exported the entire test site to the www site (after a backup of course) and the offset was still absent. I also tried adding
!important to the CSS but that made no difference.
The only difference I can think of is that, on the www site, I installed and then de-installed assorted themes and plugins (before I had the idea of making a test domain). Possibly one of them has left traces which are breaking my CSS, but how do I find (and fix) whatever is going on?
[the site is in Dutch, but you can test by using the link "Doe Mee" (4th paragraph of homepage) or by links in the sitemap (access in footer)]
Edit 15nov: I was not clear about how the sites are set up; sorry! The
test domain has
class=offsanch for all anchors; the
www domain has
class=offst for all anchors except for the anchor
id=formulier on page
doemee, which has the inline style workaround mentioned above. I changed the class name because it might confuse a future webmaster: "what is a sanch, and why should it be off?"