0

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)]

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?"

1 Answer 1

1

this is just css, probably is just browser cache not clean. However your test page website at this date does not have a .offst class

enter image description here

and your main site has you said has a inline css and also an id of formulier.

enter image description here

Once this page doesnt have the .offst class, why dont you add an id #my_h2_formulier to that h2 on the test page, and then remove the span on the main with inline css and also add the id #my_h2_formulier to that same h2. Now just give the css to the #my_h2_formulier instead of the inexistent .offst class in both sites.

One more thing in your development website, you already have a div with an id formulier, and in the main website the div doesnt have that id, instead you have that id in a span. what can be also causing this issues is that in that page your html isnt the same in both websites. that is probably the biggest issue.

4
  • Thanks for your detective work @tiago (+1), but my statement that I keep the sites identical was a bit too strong. The www site has class offst while the test site used class offsanch (intended as offset anchor, but I imagined a future maintainer wondering "what's a sanch, and why is it off?"). Using an id like #my_h2_formulier defeats my aim, which is to separate the layout part (150px offset) from the anchor name part (formulier in this case, but other anchors have other ids). I want to control the layout from a global CSS so that if I change my header height I only have to make one change.
    – NL_Derek
    Nov 14, 2021 at 21:58
  • Also, you say "browser cache not clean" but how do I clean it? I tested on several devices (PC, tablet, smartphone, iPhone) and they all seemed to have this problem (which doesn't rule out cache since these are dedicated test devices for the website).
    – NL_Derek
    Nov 14, 2021 at 22:00
  • sometimes it is the cache, normally to clean the browser cache we can use the keyboard shortcut "CTRL + SHIFT + DELETE" on almost every browser. Nov 15, 2021 at 19:04
  • I just had inspect the page, and notice that few details. the page in itself seems equal and normal. I would try if isnt working to give a class or id and make the css to it. Nov 15, 2021 at 19:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.