Cart icon - Size and position

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 :)

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 ?

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.

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

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

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

Hi there,

Try this CSS instead:

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

Let me know :)

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

Don't give up yet :)

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

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

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

That worked. Brilliant thank you Leo and Tom

Great work.

Glad we could help :)