Letter spacing of menu being over-written

[demonboy]

Hi,

I have defined the letter spacing of my main menu thus:

.x-navbar .x-nav-wrap .x-nav > li > a {
    letter-spacing: 0;
}

This was working ok.

However I have now moved all CSS from within X theme to a style.css file in my child theme. Since doing this the style for this menu according to inspector is

.x-navbar .x-nav-wrap .x-nav>li>a {
    font-family: "Lato",sans-serif;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.476em;
    text-transform: uppercase;

Any pointers on this?

https://followtheboat.com/ftbmates

[demonboy]

OK, I’ve moved this back to the X backend within wp-admin. Personally I’d prefer to have the code in a style sheet under my child theme.

I’d be interested to know what the SEO and page load speed impact is of keeping it within X’s backend vs stylesheet within the child theme.

[ruenel]

Hello @demonboy,

Thanks for writing in!

I would like you to understand how the CSS were applied to your site. It follows a certain hierarchical order.

- Theme stack style.css
- Child theme's style.css
- WordPress Additional CSS (Appearance > Customize > Additional CSS)
- Theme option settings
- Theme Option's custom css
- Cornerstone page custom css

To make sure that your code in the child theme will be enforce and applied, you might need something like this:

.x-navbar .x-nav-wrap .x-nav > li > a {
    letter-spacing: 0 !Important;
}

Or by adding a specificity selector:

.x-child-theme-active .x-navbar .x-nav-wrap .x-nav > li > a {
    letter-spacing: 0;
}

Adding the ! important would be much easier to remember.

Hope this helps.

[demonboy]

Hi @RueNel - I knew there was an order, I just didn’t know what that order was! Thanks for the confirmation.

[christian]

We’re glad that you now understand how CSS works, @demonboy.

Just an addition regarding performance. The CSS generated by the builders and theme options are outputted inline. This means that it loads along with the rest of the HTML output and the browser does not have to call the external stylesheet like the child theme’s CSS.

CSS in the builder and theme options are also more resilient to caching so there’s a higher chance that they will take effect immediately even without clearing cache.

The child theme’s style.css or any kind of external CSS is not useless though. This is the recommended place to put your own styles for your own markup. You will have to clear cache often if you always edit external stylesheets.

Hope that info is useful.