Change position of cart icon in the header?

This topic has 15 replies, 4 voices, and was last updated 4 years, 11 months ago by Ying.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

Posts
April 14, 2021 at 3:56 am #1733714
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
April 14, 2021 at 5:21 am #1733828

David
Staff
Customer Support

Hi there,

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

April 14, 2021 at 5:33 am #1733840

Sarawut

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

thanks

April 14, 2021 at 7:21 am #1734188

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?

April 14, 2021 at 7:54 am #1734255

David
Staff
Customer Support

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

April 14, 2021 at 9:00 am #1734339

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

April 14, 2021 at 11:47 am #1734502
Ying
Staff
Customer Support
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 🙂
April 19, 2021 at 9:19 pm #1741086

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!

April 20, 2021 at 1:10 pm #1742270

Ying
Staff
Customer Support

Hi Tim,

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

Can you check? Thanks!

April 21, 2021 at 6:40 am #1743056

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.

April 21, 2021 at 10:20 am #1743541
Ying
Staff
Customer Support
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;
    }
}
```
April 21, 2021 at 10:28 am #1743549

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?

April 21, 2021 at 11:04 am #1743579
Ying
Staff
Customer Support
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 🙂
April 21, 2021 at 11:07 am #1743583

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?

April 21, 2021 at 11:16 am #1743591
Tim
Never mind! Figured it out myself 🙂
```
span.number-of-items {
	display: none !important;
}
```
Thank you for your help!
Author

Posts