[Support request] Generatepress Menu Customisation

[GeneratePressUser]

Hello Generatepress Team,

Pls can you tell how can we have there amount as well as show the item quantity in the menu, pls see the private box we have showed there both elementor and generatepress menu, how can we make it same like that?

[Ying]

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.

[GeneratePressUser]

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?

[GeneratePressUser]

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)

[Ying]

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;
    }
}

[GeneratePressUser]

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.

[Author]

Posts