Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1337234
    nillamary
    Participant

    Hi,

    Is it possible to reduce the padding between my Search and Cart icons? I tried the following but no success:
    .x-icon-search {
    padding: 0;
    }
    .x-btn-navbar-woocommerce {
    padding: 0;
    }

    Thanks!

    #1337279
    Jade
    Moderator

    Hi there,

    Please try this:

    .x-navbar .mobile .x-nav>li.x-menu-item-search, 
    .x-navbar .mobile .x-nav>li.x-menu-item-woocommerce>a {
        margin-top: 0;
    }
    #1337424
    nillamary
    Participant

    Hi Jade, thanks but I already have that code with:
    margin-top: 0 !important;

    But still hasn’t reduced the margin.

    #1337425
    Nico
    Moderator

    Hi There,

    Would you mind sharing us your URL so we could check your setup closer.

    Thanks.

    #1338193
    nillamary
    Participant
    This reply has been marked as private.
    #1338449
    Nabeel A
    Moderator

    Hi again,

    Please add the following code in your Customizer:

    .x-btn-navbar-search {
        padding: 0 !important;
    }
    .menu-item.x-menu-item-woocommerce a {
        margin-top: 5px !important;
    }
    .x-navbar .mobile .x-nav>li.x-menu-item-search {
        margin: 5px 0 0 !important;
    }

    Let us know how this goes!

    #1339675
    nillamary
    Participant

    Thanks Nabeel but no luck. This is all the code now:
    .x-navbar .mobile .x-nav li>a {
    padding: 10px;
    margin-bottom: 0;
    }
    @media(max-width: 979px){
    .x-navbar .mobile .x-nav>li.x-menu-item-search,
    .x-navbar .mobile .x-nav>li.x-menu-item-woocommerce>a {
    margin-top: 0 !important;
    }
    }
    .x-btn-navbar-search {
    padding: 0 !important;
    }
    .menu-item.x-menu-item-woocommerce a {
    margin-top: 5px !important;
    }
    .x-navbar .mobile .x-nav>li.x-menu-item-search {
    margin: 5px 0 0 !important;
    }

    #1339934
    Rad
    Moderator

    Hi there,

    Since your mobile menu is displayed on desktop too, then @media block should be removed.

    .x-navbar .mobile .x-nav li>a {
    padding: 10px;
    margin-bottom: 0;
    }
    .x-navbar .mobile .x-nav>li.x-menu-item-search,
    .x-navbar .mobile .x-nav>li.x-menu-item-woocommerce>a {
    margin-top: 0 !important;
    }
    .x-btn-navbar-search {
    padding: 0 !important;
    }
    .menu-item.x-menu-item-woocommerce a {
    margin-top: 5px !important;
    }
    .x-navbar .mobile .x-nav>li.x-menu-item-search {
    margin: 5px 0 0 !important;
    }

    Hope this helps.

    #1340642
    nillamary
    Participant

    Hi Rad, that makes sense.

    Excellent that worked!

    Many thanks!

    #1340666
    Nico
    Moderator

    Happy to hear that.

    Feel free to ask us again.

    Thanks.

  • <script> jQuery(function($){ $("#no-reply-1337234 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>