Select Page

Mini-cart misaligned on centered menu when Custom Icon is activated

Home Forums Support Mini-cart misaligned on centered menu when Custom Icon is activated

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • Helpful
    Up
    0
    Down
    Not Helpful

    Hi,

    I’m building a website for one of my customers, and I have a weird issue : when the menu is centered (or every other option than default menu), the mini-cart icon is totally misaligned. The cart icon is on the left while the counter is on the right, and they are all under the menu.

    If I add a “display:inline” CSS code to the cart-icon class, both icons are aligned with the menu but the cart still appear on the left and the counter to the right.

    Playing with icon position doesn’t change anything.

    Thanks for your help.

    Helpful
    Up
    0
    Down
    Not Helpful

    Can you try adding the following CSS – does this help?

    .shop-cart {
    float: none;
    display: inline-block;
    }
    #et-top-navigation .et-cart-info {
    padding: 0;
    position: relative;
    top: 22px;
    }

    Does this work?

    Helpful
    Up
    0
    Down
    Not Helpful

    Hi,

    Thank you, yes with that snippet the cart is now aligned. Unfortunately, I’ve added some CSS to switch from centered menu to standard on fixed header when scrolling, and now it breaks my whole menu on fixed header.

    Here’s my whole custom CSS :

    @media all and (min-width: 980px){
    /*********************************
    change centered logo on centered header style to default layout when fixed header is active
    *********************************/
    .et_header_style_centered header#main-header.et-fixed-header .logo_container {
    float: left;
    width: 20%;
    }
    
    .et_header_style_centered #main-header.et-fixed-header div#et-top-navigation:not(.et-cart-info) {
    width: 80%;
    float: right;
    height: 90px;
    line-height: 90px;
    text-align: right;
    }
    	
    .et-fixed-header #top-menu-nav {
    float: none!important;
    }
     
    .et_fixed_nav #et-top-navigation {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transition: none !important;
    }
    }
    #main-header {
        box-shadow: none !important;
    }
    /*Style de menu*/
    .et-fixed-header #top-menu a:before {
    content: "";
    position: absolute;
    top: -148px;
    left: -10px;
    width: calc(100% + 20px);
    background: red;
    z-index: -1;
    border-radius: 4px;
    height: 120px;
    transform: skewY(0deg);
    transition: .4s ease-in-out all;
    }
    
    .et-fixed-header #top-menu a:hover:before {
    top: -70px;
    transform: skewY(20deg);
    }
    
    .et-fixed-header #top-menu a:hover {
    color: #fff;
    opacity: 1;
    }
    
    .et-fixed-header #top-menu li.current-menu-item>a:hover {
    color: #fff!important;
    opacity: 1;
    }
    
    .et-fixed-header #top-menu li:nth-child(1) a:before {
    background: #02a3d9;
    }
    
    .et-fixed-header #top-menu li:nth-child(2) a:before {
    background: #015883;
    }
    
    .et-fixed-header #top-menu li:nth-child(3) a:before {
    background: #ff5e00;
    }
    
    .et-fixed-header #top-menu li:nth-child(4) a:before {
    background: #50514f;
    }
    
    .et-fixed-header #top-menu li:nth-child(5) a:before {
    background: #c2efb3;
    top: -70px;
    transform: skewY(20deg);
    }
    
    .et-fixed-header #top-menu li:nth-child(5) a {
    color: #fff;
    }
    Helpful
    Up
    0
    Down
    Not Helpful

    Can you send me a link so I can check this live?

    Helpful
    Up
    0
    Down
    Not Helpful

    Of course : https://labo.azur.solutions/alternativbox/

    Helpful
    Up
    0
    Down
    Not Helpful

    Try this

    .shop-cart {
        display: inline-flex;
    }
    
    Helpful
    Up
    0
    Down
    Not Helpful

    It works !!! Many thanks for your help 🙂

    I wish you a nice day guys

    Helpful
    Up
    0
    Down
    Not Helpful

    Awesome thanks for letting me know 😀

    Have a great day too!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.