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:
.offst {
margin-top: -150px;
padding-bottom: 150px;
display: block;
}
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:
<h2>
Bestelformulier
<span style="
margin-top: -150px;
padding-bottom: 150px;
display: block;"
id="formulier"> </span>
</h2>
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)]