[Resolved] Change position of cart icon in the header?

[Tim]

Currently I have enabled the Off Canvas Menu and set it to the left side of the header which is fine.

I have also enabled WooCommerce -> “Display cart in menu”.
The cart icon appears directly left of the hamburger menu icon.

I want to move the cart icon to the right side of the header, while the hamburger icon stays at the left side.

How can I accomplish this?

FIXED: Also, I would like to push the hamburger toggle icon a little down because right now it’s too close to the top of the screen. I have tried adding

.slideout-toggle {
	margin-top: 50px;
}

and it works, but that also pushes the header and logo down as well which I don’t want.

Fixed by first setting header padding to 0 in Layout > Header, then adding the css above

[David]

Hi there,

can you share a link to the site where i can see the issue ?

[Sarawut]

Hi,
I want to move the cart icon to the right side of the header

thanks

[Tim]

Hi David,

I fixed the issue with the margin myself, see post #1.

Unfortunately, this is a site I’m working on locally/offline so I’t complicated right now to give you a link.

Do you need to see the page yourself to help me with the placement quastion?

[David]

Hi Sarawut – can you raise a new topic where we can look at the issue.

Hi Tim, be good to see the site – perhaps a screenhot of what you got and what you need could be enough

[Tim]

Great! So:

If I activate Layout > WooCommerce > Display cart in menu

I get a shopping bag icon to the left of my off canvas menu icon. I want to move that shopping bag icon/link to be at the right side instead. Also, as you can see, it’s a little bit higher than the rest, would like to align it horizontally to the other icon/header.

Link removed

[Ying]

Hi Tim,

Without seeing the code it’s difficult to provide help, could you give this CSS a try:

.menu-bar-items {
    order: 10;
}

The vertical alignment should be set to center by default, I’m not sure why it’s like this on your site, there might be some custom CSS disturbing the layout. For this issue, I’ll have to see the live site.

Let me know 🙂

[Tim]

Hi Ying,

Unfortunately, that code didn’t do anything.

I have included the site URL below.

Right now, I have activated the Display cart in menu option without any additional formatting to it. As you can see, it’s positioned in the top left corner of the page, and it’s pushing the whole site to the right.

The slideout toggle is positioned by using David’s code here

I would like the cart icon to be positioned exactly like the slideout toggle, only on the opposite (right) side of the header.

Thanks!

[Ying]

Hi Tim,

I don’t see a shopping bag icon in header currently.
https://www.screencast.com/t/07T3CX6kHhv4

Can you check? Thanks!

[Tim]

Hi Ying,

Can you check now?

It looks fine on mobile and tablet, but as soon as the screen width goes above 895px, it switches position to the left.

[Ying]

Try this CSS:

#site-navigation .inside-navigation .menu-bar-items {
    display: flex;
    flex-direction: row;
    flex: 1;
}
span.menu-bar-item.wc-menu-item {
    order: 2;
    margin-left: auto;
    top: 43px;
    z-index: 1;
}
@media (max-width: 895px) {
    span.menu-bar-item.wc-menu-item {
        top:10px;
    }
}

[Tim]

That works, thanks a ton!

Is it possible to move the icon a little to the right and up on mobile view? It’s a little close to the header and not aligned to the hamburger menu icon on the left:

And a px or two to the right on tablet view also?

[Ying]

Change this CSS:

@media (max-width: 895px) {
    span.menu-bar-item.wc-menu-item {
        top:10px;
    }
}

To this:

@media (max-width: 895px) {
    span.menu-bar-item.wc-menu-item a {
        padding-right: 20px;
    }
     span.menu-bar-item.wc-menu-item {
        top:10px;
    }
}

Feel free to adjust the numbers in the above CSS 🙂

[Tim]

Thank you!

Last question: is it possible to remove the item count from the icon, to only show the icon and nothing else, regardless of items in the cart or not?

[Tim]

Never mind! Figured it out myself 🙂

span.number-of-items {
	display: none !important;
}

Thank you for your help!

[Author]

Posts