[Resolved] Issues with the cart icon in regular menu (alignment, order)

[Maryse]

Hello,

I’m having a few issues with the Cart button in the regular menu. This is a staging site so you will find the info to access it in the private information.

1. Alignment: when there is nothing in the cart, it is aligned next to the last menu item instead of below the last menu item. When there is something in the cart, it is aligned at the very end but centered. I’m wondering if there is a way to align it to the left like all menu items regardless of if there is an item in it or now.
2. Order: Is there a way not to make it the last item in the menu? In the current menu, I created a custom link called “Panier d’achats” to show where I would like the cart menu item to appear in the menu (but it doesn’t show items in the cart). Is it possible to position it there? So in between “Faites un don” and “Quitter rapidement”. This would only apply to the regular menu because on mobile, it is located outside of the menu.
3. Is it possible, when there is no item in the cart and when it’s not the mobile menu, to add the text “Shopping cart” after the icon (when in English and “Panier d’achats” when in French)? I’ve seen somewhere in this forum how to add text, but it added it in all circumstances. Either that or, if it is simpler, show 0.00 $ next to the cart when there is nothing in the cart just so that it’s not a cart alone (this option could apply to mobile menu too, but not necessary either, whatever is simpler).

Thanks so much in advance for your help!

[Elvin]

Hi there,

For #1 and #2: Were you trying to lay it out like this?
https://share.getcloudapp.com/d5u65R8q

If so, try adding this CSS:

.inside-navigation.grid-container > * {
    flex: 1 0 100%;
}

For #3: Do you mean like this? https://share.getcloudapp.com/E0uKvj2v

If so, try adding this CSS:

span.menu-bar-item.wc-menu-item:not(.has-item) a:after {content: " Shopping Cart";display: inline;}

[Maryse]

Hi Elvin,

Thanks for your reply.

For #1, yes this has aligned it to the left, but it also moved all the items maybe 20 pixels to the left. Do you know why that is?Note that for the other menu items, I used the following code to align them to the left :

.main-navigation .main-nav>ul {
   align-items: flex-start; 
}

Is there a better wayt to align everything in the menu to the left (except the logo)?

For #2, I wondered if I can place the shopping cart within the menu instead of at the end. So in Between “Faites un don” and “Quitter rapidement”. Or is that not possible?

For #3, yes, that is what I mean, but at my end, the text still shows even when I have an item in the cart.

Thanks!

[Elvin]

Can you temporarily disable autoptimize? (perhaps until the issue is resolved?)

So we can properly check the styling and be sure it will work. Let us know. 😀

[Maryse]

Ok, I deactivated Autoptimize. At my end, it still does not work. Do you see the same at your end?

[David]

Hi there,

might be best to move the Cart into the main nav menu – see my reply here:

https://generatepress.com/forums/topic/website-menu/#post-1692439

[Maryse]

Hi David,

I’m not sure I understand. I see the CSS moves a menu item to the right (based on the number and percentage).

I tried the snippet, and I see this adds the shopping cart at the end of the menu (without the need to use the setting in the customizing section). It is now aligned to the left, which is good, but I still don’t understand (sorry!) how to position it somewhere else in the menu. Can you help with that? And it seems to remove the shopping cart from the mobile menu…

[David]

1. To keep the Cart in the Mobile header remove this part of the PHP Snippet i provided:

add_action( 'wp', function() {
    remove_action( 'generate_menu_bar_items', 'generate_wc_do_cart_menu_item', 5 );
} );

2. Add the following CSS:

@media(min-width: 1000px) {
    .menu-bar-item.wc-menu-item {
        display: none;
    }
    .site-header .main-navigation li:nth-last-child(-n+4) {
        order: 20;
    }
    .site-header .main-navigation li.wc-menu-item {
        order: 10;
    }
}

Just to cover some things regarding the CSS:

1. this .site-header .main-navigation li:nth-last-child(-n+4) considering the default order of the menu, selects the Last 4 menu items ( which includes the cart icon ) and gives them a flex order of 20. On its own you won’t notice any difference but its putting those items all at the end of the virtual queue.

2. this .site-header .main-navigation li.wc-menu-item selects the cart menu item, and tells it to go to position 10 in the queue, so it appears above those positioned in order 20

Important point is the -n+4 you have to adjust the 4 if you add or remove items from the end of the menu.

[Maryse]

Awesome, thanks that works! And thank you for the explanation. 🙂

The only question I had left was: is it possible to put the “Panier d’achats” (when in French) and “Shopping Cart” (when in English) next to the cart, but only when there are no items in the cart. Elvin provided some CSS code, but at my end, it always shows the text regardless of if there is something in the cart or not.

And now, as I was testing, I did notice another issue. I can start another topic if it’s better because it doesn’t seem to be caused by the snippet or CSS you provided. But when on mobile, on the home page, when I scroll down, part of the menu bar (including logo) gets hidden at the top. It does not happen on any other pages. Do you know what can cause this?

[David]

Silly question – where can i add an item to the cart ?

If you can raise a new topic for the other issue please 🙂

[Maryse]

Click on the “Boutique” menu item and you’ll see some items you can add to cart.

Ok, I will raise a new topic for my other question. Thanks!

[David]

Aah ok – the .has-item class in Elvins CSS should be .has-items e.g

.wc-menu-item.menu-item-align-right:not(.has-items):lang("fr") a::after {
    content: " Panier d'achats";
    display: inline;
}

[Maryse]

Ok, could there be en error in the code related to the language, because now the text doesn’t show at all. But if I remove the code related to the language it works.

Thanks!

[David]

Try it this way around:

html[lang="fr-CA"] .wc-menu-item.menu-item-align-right:not(.has-items) a::after {
    content: " Panier d'achats";
    display: inline;
}

[Maryse]

It works, thanks so much for all your help!

[Author]

Posts