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

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

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!

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. :D

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

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

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...

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.

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?

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

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

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!

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

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!

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

It works, thanks so much for all your help!