Archived topic
Style.css vs Additional CSS in the customizer
21 replies · Started by themedleb on December 10, 2017
Hi,
When I try to add this CSS code:
/*Force search icon to be on the extreme left*/
.sf-menu > li.menu-item-float-right,
.sf-menu > li.search-item {
float: none !important;
}
div#primary-menu {
text-align: left;
}
.nav-aligned-right.nav-below-header .main-navigation .menu > li {
float: right;
}
to the Style.css file in the child theme, it has no effect, but when I try to add it to "Additional CSS" in the customizer it works, I tried to deactivate "Cache dynamic CSS" option in the "Customizer => General", and cleared the web browser's cache, but same issue.
Noting that other CSS codes works flawlessly in the Style.css file of the child theme, except this one, why?
Thank you.
Hi there,
All of that CSS looks like it's working well inside your style.css file.
You can see the CSS is working by using developer tools in your browser and inspecting the specific elements.
I did, I don't know how to find some CSS classes like this .sf-menu > li.menu-item-float-right and others, can you try to make the search button on the extreme left with your own code? I will remove the code I made so you can work comfortable.
Not sure what you mean?
.menu-item-float-right should be a custom class you've added for a menu item.
Actually, this code is not mine, it's Tom who gave it to me when I asked him about the same request (Moving the search icon to the extreme left) on another/test website, now I want to apply the same thing on the new/production website, but It only works when I put it on the "Additional CSS" option in the Customizer, and doesn't work when I put it in the child theme, even all other CSS codes I inserted in the child theme works.
Does it work when you put it on the very top of your child theme stylesheet?
CSS is CSS, it should work regardless where you add it.
I did, but same issue.
And yeah, that's what driving me crazy.
I can see all of your CSS loading in developer tool:
https://s33.postimg.org/gcc1pbikf/2017-12-11_1246.png
https://s33.postimg.org/8xmpwfh3z/2017-12-11_1246_001.png
https://s33.postimg.org/kmqpkev7z/2017-12-11_1246_002.png
But none of them work lol, that's weird.
That means they're likely being overwritten elsewhere.
You can try adding !important after each one to test if that's the case.
I did try this, in all cases it changes nothing, except when I put it after float: right; of the classes .nav-aligned-right.nav-below-header .main-navigation .menu > li every menu item goes to the right.
Hmm, the only way adding !important wouldn't work is if the same CSS with an !important tag exists later in the document.
I looked at each element you're targeting, and they're each using the CSS you've shared above. It's all being read and applied as it should be.
I tried to replace the same classes in Style.css and RTL.css from the parent folder just to test, but nothing happens, I think it's all about the way Wordpress treats some codes from CSS of the child theme vs CSS from the "Additional CSS" in the Customizer differently.
Thank you Tom and Leo for help, much appreciated.
Did you solve this?
