I’m working with a business theme on which I’m making some type modifications. Particularly, the guardian theme reveals a menu which I wish 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 baby theme and added some CSS to it in its type.css file:
#menu-menu-movil li > a {
font-weight: 500;
font-family: Poppins, Arial, sans-serif;
}
No means: the location ignores my modifications. After I examine the HTML I see that the browser is making use of as a substitute CSS directions from the guardian theme that concentrate on completely different courses:
.mobile-navigation .nav-menu > li > a {
font-size: 16px;
shade: #1a1a1a;
font-weight: daring;
text-transform: capitalize;
}
So I believe that it is an issue with conflicting CSS directions and their stage of specificity or no matter… however then I attempt opening the CSS editor in WP Admin at "Appearance / Customise / Additional CSS" and pasting there my modifications… and so they work.
This led me to assume: is there a default order wherein WordPress masses CSS from all of the potential locations the place they are often? ("Additional CSS", youngster themes, guardian themes…). I appear to do not forget that there was, however after looking round on Google for some time I could not discover something. Or is my drawback in the long run about CSS specificity?