Docs

[websperations]

I am using Ubermenu and have the WooCommerce Menu enabled in customizer.

The Styling is broken with Ubermenu. It works fine with the stock menu.

http://heavensent.websperations.com/

How can I get the WooCommerce Menu to honor the styling set within Customizer while using Ubermenu?

Thanks,

Micah

[websperations]

This reply has been marked as private.

[Lely]

Hello Micah,

Thank you for the credentials.
Update this:

.menu-item.current-menu-parent.x-menu-item.x-menu-item-woocommerce {
  float: left;
  margin-top: 12px;
}

To this:

.menu-item.current-menu-parent.x-menu-item.x-menu-item-woocommerce {
    float: left;
    padding-top: 21px;
    color: #cecece;
}

Update this:

.ubermenu-nav .x-menu-item-search .x-btn-navbar-search {
    line-height: 50px;
    font-size: 14px;
    color: #cecece;
}

To this:

.ubermenu-nav .x-menu-item-search .x-btn-navbar-search {
    line-height: 50px;
    font-size: 14px;
    color: #cecece;
    padding-left: 20px;
    padding-right: 20px;
}

Also add this:

a.x-btn-navbar-woocommerce {
    color: #cecece;
    font-weight: bold;
}

Hope this helps.

[websperations]

Thanks for the help. That did make the text visible and vertically centered, it did not restore the full styling.

Please look at the attached image. The only difference is UberMenu is disabled on the bottom image.

I want want the full WooCommerce Menu styling shown on the bottom image with the stock menu bar to show properly with the UberMenu enabled.

Thanks,

Micah

[websperations]

Also, please note that the Dollar amount And Quantity look like the same number without the proper styling.

$0.000 Items

It should be…

$0.00 0 Items

Micah

[Rad]

Hi there,

Please add this CSS as well,

.x-btn-navbar-woocommerce .x-cart {
    background: #bb822b;
    padding: 4px 4px 4px 10px;
    position: relative;
top:-8px;
border-radius: 5px;
color:#fff;
}
.x-btn-navbar-woocommerce .x-cart .inner {
display: inline-block;
padding: 4px;
margin-left: 6px;
background-color:#fff;
border-radius: 5px;
color: #bb822b;
}

Hope this helps.

[websperations]

Awesome, thanks for the code! I’m pretty sure this will be useful for others as well.

Micah

[Rue Nel]

Hi Micah,

You’re welcome! Thanks for letting us know that it has worked for you.

For other solution and tips, please check out this topic:
https://community.theme.co/forums/topic/add-wpml-custom-flags-to-top-bar-search-icon-inline-remove-breadcrumbs/#post-1087897

Best Regards.

[Author]

Posts