[Resolved] Cart icon – Size and position

[tenchystryder]

Hi guys

Well finally installed Woocommerce and had a little help and a few tips from David earlier.

One thing I cannot seem to resolve even after searching the GP forums is the cart icon size and position.(display cart in menu option). I have “Display mini cart sub-menu” option active also.
I use mega menu and it has placed it directly to the right, and the icon is quite small.

Would be really good (better) if I could have it within the top bar to the right, I would move/remove the other bit about as required.

Is this possible ?

[Tom]

Hi there,

We can make it bigger with some CSS:

nav li.wc-menu-item {
    line-height: 90px;
}

nav li.wc-menu-item a {
    font-size: 25px;
}

If you want to add it to the top bar, you would need to implement a Secondary Navigation and set it to display in the top bar: https://docs.generatepress.com/article/top-bar-widget-area/#secondary-navigation

Then you can move the menu item into the secondary nav like this: https://docs.generatepress.com/article/generate_woocommerce_menu_item_location/

Let us know if you need more info 🙂

[tenchystryder]

Hi Tom
Hope your well

So I have moved it OK.
The CSS you gave me has not affected the icon size of the cart.
Is that code for the basket icon or the pop out mini cart overall size ?

[tenchystryder]

Right. Quick update. If I increase the font size in secondary nav, the icon grows as well.
Also, The secondary nav isn’t showing on mobile devices. I’ve tried a few settings for sticky nav etc but no good.

[Tom]

That CSS is for the icon size – not the mini cart. What about the mini cart are you trying to adjust?

Try adding this to show it on mobile:

@media (max-width: 768px) {
    .secondary-navigation ul {
        display: block;
    }
}

[tenchystryder]

The mini cart (pop out) is fine, I wanted the cart icon bigger, That code isn’t working Tom.

Now have visibility on mobile device though thank you.

Another thing, The icon won’t align left on that top nav bar. The links move but the icon stays over on the right …. Not too worried about this but would like to know why it won’t move with everything else

[tenchystryder]

The line-height changes the section overall height including the view basket and checkout buttons on the pop-out part of cart.

Changing the px size of this isn’t doing anything Tom.

nav li.wc-menu-item a {
    font-size: 20px;
}

[Leo]

Hi there,

Try this CSS instead:

.secondary-navigation .main-nav ul li.wc-menu-item > a:before {
    font-size: 15px;
}

Let me know 🙂

[tenchystryder]

Close. But changed the price size also AND everything in the pop out cart LOL. It was massive

I might just give up and settle for what I have ha ha

[Leo]

Don’t give up yet 🙂

Can you try the edited CSS?
https://generatepress.com/forums/topic/cart-icon-size-and-position/#post-993973

[tenchystryder]

Hi Leo

It was that css I was referring to. It changed the icon, the amount (£££) in the basket and everything in the pop out cart when you hover over it

[Leo]

One more try:
https://generatepress.com/forums/topic/cart-icon-size-and-position/#post-993973

[tenchystryder]

That worked. Brilliant thank you Leo and Tom

Great work.

[Leo]

Glad we could help 🙂

[Author]

Posts