Okay
  Public Ticket #1355324
styling of woocommerce cart
Closed

Comments

  • Ben started the conversation

    Hi,
    Within the Salient-child theme, that I configured, I am using the 'original' skin (not Ascend skin, as this does not indicate sub-menu items with a 'caret-sign').

    Therefore the Woocommerce cart only shows when there are items in the cart.

    First I would like the cart to 'always show' (like with the Ascend skin).

    Second, I would like to edit its position slightly as my header logo is slightly higher, ans the cart position needs adjustment.
    (Within Ascend skin this would be possible with CSS:

    #header-outer .cart-menu { right: 15px; padding-top: 120px; }
    But I am not able to figure out the corresponding CSS within 'original' skin...)

    Thanks for your time,

    Ben


  •  8,470
    Tahir replied

    Hey Again,

    The easiest way would be to switch to the Ascend skin and add in the caret sign using pseudo css elements . Let me know .

    Thanks 


    ThemeNectar Support Team 

  • Ben replied

    Can you advise me on the needed CSS for adding these carets in the Ascend skin?

    I will have to see next if the Ascend skin does not change other things too radically.

    In the meantime, I tried adding the foreseen CSS for needed adjustment in the Ascend skin:
    #header-outer .cart-menu { right: 15px; padding: 120px 17px 17px 20px; }

    But even with '!important' added, the change does not show up, even in Ascend skin (cleared caches)

    Thanks for your help

    added comment:
    Oooopss, it seems to be that servers cache that is the culprit. So, my suggested CSS now actually works ( :-) )

    Nonetheless, I would appreciate some advice on the adding of carets next to menu items with sub-menu-items . 

  •  8,470
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    #header-outer[data-lhe="default"] header#top nav > ul > li.menu-item-has-children > a:after {
        content: "\f0d7";
        font-family: FontAwesome!important;
        left: 5px ;
        position: relative;
    }

    Thanks


    ThemeNectar Support Team 

  • Ben replied

    Hi Tahir,

    Thanks for your advice. This added CSS shows carets next to ALL menu items...

    Just added class: '.menu-item-has-children' in order to show ONLY with menu-items that 'have children'...

    So in total:

    #header-outer[data-lhe="default"] header#top nav > ul > li.menu-item-has-children > a:after {
        content: "\f0d7";
        font-family: FontAwesome!important;
        left: 5px ;
        position: relative;
    }

    Thanks for helping me out, Tahir

  •  8,470
    Tahir replied

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    #header-outer[data-lhe="default"] header#top nav > ul > li.menu-item-has-children > a:after {
        content: "\f0d7";
        font-family: FontAwesome!important;
        left: 5px ;
        position: relative;
    }

    Thanks


    ThemeNectar Support Team