[Support request] Style.css vs Additional CSS in the customizer

Home Forums Support [Support request] Style.css vs Additional CSS in the customizer

Home Forums Support Style.css vs Additional CSS in the customizer

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #446481
    themedleb

    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.

    #446555
    Tom
    Lead Developer
    Lead Developer

    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.

    #447031
    themedleb

    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.

    #447043
    Leo
    Staff
    Customer Support

    Not sure what you mean?

    .menu-item-float-right should be a custom class you’ve added for a menu item.

    #447055
    themedleb

    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.

    #447197
    Leo
    Staff
    Customer Support

    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.

    #447201
    themedleb

    I did, but same issue.

    And yeah, that’s what driving me crazy.

    #447210
    Leo
    Staff
    Customer Support
    #447211
    themedleb

    But none of them work lol, that’s weird.

    #447283
    Tom
    Lead Developer
    Lead Developer

    That means they’re likely being overwritten elsewhere.

    You can try adding !important after each one to test if that’s the case.

    #447316
    themedleb

    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.

    #447468
    Tom
    Lead Developer
    Lead Developer

    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.

    #447593
    themedleb

    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.

    #447595
    themedleb

    Thank you Tom and Leo for help, much appreciated.

    #447843
    Leo
    Staff
    Customer Support

    Did you solve this?

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.