Docs

[Mary Beth M]

Hello again wonderful X-team members!

I’m in the process of building a WooCommerce site, and my client just asked me if I could move the search icon, the shopping bag icon, and the user account link from the main navigation to the area just under where the social icons would be if I turned the header bar on.

http://www.leemerritt.com/shop is what the menu looks like now, and I added a quick mockup to illustrate what I mean. I imagine it’s not too difficult on the desktop version, but would I be able to line the icons up with the hamburger on the mobile version?

Thank you very much for any help with this, you guys are the best.

[Mary Beth M]

This reply has been marked as private.

[Rupok]

Hi there,

You can add something like this to move the WooCommerce menu :

.x-navbar .desktop .x-nav > li.x-menu-item-woocommerce {
  margin-top: -200px;
}

But moving the search icon would be a bit difficult and need some custom development.

Thanks!

[Mary Beth M]

That moved the one shopping cart icon up, but still need change that icon to a bag instead of a cart, push it to the far right, and it disappears on mobile

Also need to transform the “my account” into an icon and stick it up there as well.

If it’s too difficult to move the search input, that’s fine. Just need to keep the WooCOmmerce icons together.

Thank you so much.

[Rupok]

Hi there,

It would be a bit tricky but you can try updating the code :

.x-navbar .desktop .x-nav > li.x-menu-item-woocommerce {
  position: absolute;
  right: 0;
  top: -200px;
}

.x-menu-item-woocommerce .x-icon-shopping-cart::before::before {
  content: "\f290";
}

Note that the code to change the icon won’t work on Customizer. You need to use Child Theme‘s style.css to place the code.

Cheers!

[Mary Beth M]

Do I have to open another forum topic to get my other two questions answered?

[Christopher]

Hi there,

Please add following code in topbar area :

<a href="#" class="x-btn-navbar-search"><span><i class="x-icon-search" data-x-icon="" aria-hidden="true"></i><span class="x-hidden-desktop"> Search</span></span></a>| <a href="#"><i class="x-icon-user" data-x-icon=""></i></a>

Hope it helps.

[Author]

Posts