Generatepress Menu Customisation

Hi there,

Try this CSS:

.cart-contents .amount {
    display: inline-block;
    order: -1;
    margin-right: 10px;
}

.main-navigation .menu-bar-item.wc-menu-item > a {
    display: flex;
    align-items: center;
}

Note: when there's no item in the cart, the numbers won't show.

Hey Ying,

Perfect, is it possible to:

1) When there’s no item in the cart, show 0

2) On mobile when tapping on the cart it takes customer to cart page, how to make it open such mini cart on mobile which opens on hovering mouse on it on desktop?

Hey Ying,

Adding up to previous reply, when setting menu item height in order to make the logo look bigger on mobile, it also increases space in between those menu items (see image in private box)

1. Try this CSS:

.cart-contents>span.number-of-items.no-items {
    display: block;
}
span.number-of-items.no-items:before {
    content: "0";
}

2. Try this CSS, not sure how the hover/tap would go.

@media (max-width: 768px) {
div#wc-mini-cart {
    display: block;
}
    ul.woocommerce-mini-cart.cart_list.product_list_widget {
    display: block;
}
}

3. Try this:

@media (max-width: 768px) {
    .site-logo img {
        height: 100px;
    }
}

Hey Ying,

All perfect, thanks a lot, and yes you are right that tap menu is not good for mobile, it will be amazing if your team also put a sliding menu like elementor, which opens from side.