How to add Custom CSS to Theme Files

Hi Heather,

Thanks for reaching out, and thanks for using the BoldGrid Cobalt WordPress Theme. We are always happy to help! Generally speaking we recommend putting code like that in the Customizer, because when you update the theme any modifications made in the theme will be lost, but any code in the Customizer will stay.

Was there a specific reason you wanted to move the code out of the Customizer?

Thanks,
Nicole

Hi Heather-

Thanks for the additional details, that helps quite a bit.

I can think of a few reasons that your CSS code might work in the Customizer, but not in the theme file.

First, if you’re using a caching plugin on top of Asset Cleanup, you’ll probably need to clear both your website’s cache as well as your browser cache to see the changes. You can also try a private browsing or “incognito” window to see if the browser cache is the cause.

Second, right now, if I search for mobmenuright in your page source, I don’t see that element ID occurring anywhere on the page, so as the page currently is, no elements will match your CSS Rule. Have you made any changes since you created that code that might have removed that element ID?

Hi Heather-

Great, thanks for confirming that you’re clearing the cache.

So, what I can tell for sure is that the version of Cobalt’s style.css that’s being served right now doesn’t include your custom CSS rule.

Here’s how to check. First, open your browser’s Developer Tools console. You can do this by right-clicking on the page, and selecting Inspect or Inspect Element, depending on which browser you use. Navigate to the Sources panel, and select the wp-content/themes/boldgrid-cobalt/style.css file. Finally, use Ctrl-F (Cmd-F on a mac) to search for your Custom CSS rule, in this example I searched for mobmenu:

What I can’t say for sure, is why your updated style.css file isn’t being served. Here are some things I can think to check:

• When you go back to the theme editor, is your Custom CSS still there?
• Is style.css the correct file that you’re adding the code to?
• Are you using a CDN to serve your assets that also might need a manual cache flush?

Hi Heather-

CSS generally treats rules as “the last rule is the most important,” but your rule looks like it should be specific enough not to worry about order-of-operations. If you add the rule to the very end of style.css, we should be able to spot if it’s not working because something else is overriding it.

Hi Heather!

Thanks for adding that!

We can see now that there is indeed a rule that’s overriding your custom rule, coming from the Dynamic Mobmenu plugin itself. But, it’s exactly identical to your custom rule, so the effect is the same:

While I don’t have a Samsung device on hand to test this out on a physical device, I also tried checking using the browserstack.com virtual device cloud, and the effect looks like it’s working as you’ve designed it:

Are you seeing the same thing I am, and if so, are you trying to accomplish something else? If you’d like to include a screenshot, you can use a service like imgbb.com to share it here, or upload it to your own website’s media library and post a link to it there.