- This topic has 21 replies, 4 voices, and was last updated 6 years, 3 months ago by Leo.
-
AuthorPosts
-
December 10, 2017 at 4:55 pm #446481themedleb
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.
December 10, 2017 at 8:31 pm #446555TomLead DeveloperLead DeveloperHi 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.
December 11, 2017 at 9:16 am #447031themedlebI 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.December 11, 2017 at 9:31 am #447043LeoStaffCustomer SupportNot sure what you mean?
.menu-item-float-right
should be a custom class you’ve added for a menu item.December 11, 2017 at 9:43 am #447055themedlebActually, 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.
December 11, 2017 at 12:29 pm #447197LeoStaffCustomer SupportDoes 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.
December 11, 2017 at 12:33 pm #447201themedlebI did, but same issue.
And yeah, that’s what driving me crazy.
December 11, 2017 at 12:47 pm #447210LeoStaffCustomer SupportI 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.pngDecember 11, 2017 at 12:50 pm #447211themedlebBut none of them work lol, that’s weird.
December 11, 2017 at 2:55 pm #447283TomLead DeveloperLead DeveloperThat means they’re likely being overwritten elsewhere.
You can try adding
!important
after each one to test if that’s the case.December 11, 2017 at 3:27 pm #447316themedlebI 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.December 11, 2017 at 11:21 pm #447468TomLead DeveloperLead DeveloperHmm, 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.
December 12, 2017 at 3:21 am #447593themedlebI 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.
December 12, 2017 at 3:22 am #447595themedlebThank you Tom and Leo for help, much appreciated.
December 12, 2017 at 8:18 am #447843LeoStaffCustomer SupportDid you solve this?
-
AuthorPosts
- You must be logged in to reply to this topic.