I am working with a commercial theme on which I am making some style changes. Specifically, the parent theme shows a menu which I want to modify. The code for that menu is:
<div class="mobile-navigation hidden-md hidden-lg">
<div id="close-menu-moblie">
<a href="#">
<i class="icon-close icons"></i>
</a>
</div>
<div class="mobile-menu-container">
<ul id="menu-menu-movil" class="nav-menu mobile-menu">
<li id="menu-item-4723" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-4723 active">
<a href="/" aria-current="page">La Familia</a>
</li>
<li id="menu-item-4724" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4724">
<a href="/tierras.html">La Tierra</a>
</li>
So I created a child theme and added some CSS to it in its style.css file:
#menu-menu-movil li > a {
font-weight: 500;
font-family: Poppins, Arial, sans-serif;
}
No way: the site ignores my changes. When I inspect the HTML I see that the browser is applying instead CSS instructions from the parent theme that target different classes:
.mobile-navigation .nav-menu > li > a {
font-size: 16px;
color: #1a1a1a;
font-weight: bold;
text-transform: capitalize;
}
So I think that it’s a problem with conflicting CSS instructions and their level of specificity or whatever… but then I try opening the CSS editor in WP Admin at "Appearance / Customise / Additional CSS" and pasting there my changes… and they work.
This led me to think: is there a default order in which WordPress loads CSS from all the possible places where they can be? ("Additional CSS", child themes, parent themes…). I seem to remember that there was, but after searching around on Google for a while I couldn’t find anything. Or is my problem in the end about CSS specificity?
