Global custom css not always loading at first time

[Johnn91]

Hello,

I used custom CSS in the WoodMart theme to customize things like shadows or, for example, the margin-bottom of the header. However, it seems custom CSS does not have priority when the site is loading for the first time.

If you visit the website, at first it seems fine, but if you go to the “product” page or start navigating it, the custom CSS is not loaded at all until you press F5 to refresh the website.

Example of CSS in “Global Custom CSS”

/* header */

#menu-main-navigation {
	margin-top: 10px;
}

.whb-header {
    margin-bottom: 0px;
}

The first time I visit the website, the header seems fine. Then, if I navigate or just go back and navigate again, the header, for example, has a 40px margin-bottom, even though I set it to be 0px in the global custom CSS. However, if I press F5, it returns to the way I want, “reading” the custom CSS as it should.

What could be causing this problem? This issue persists even if you use incognito mode in the browser and clear the browser cache. Could it be related to theme or basic theme-included plugin settings? The website is still under construction, so there are no more plugins than those needed during the installation process of the theme (Kids).

Thank you in advance.

• This topic was modified 10 months, 2 weeks ago by Johnn91.

Hello,

You need to make selectors heavier, try to use the below code and let me know if that works for you.

body .whb-header {
    margin-bottom: 0px;
}

Kind Regards

Yes, just like this, adding ‘body’ seems to make it work.

Thank you.

Hello,

You are welcome! In case you need any additional help, I’d be more than happy to assist you.

Have a good day!

Kind Regards

[Author]

Posts