[HelloParticipant]

Hi,
As the topic title says how do I do this? At the moment, the header areas 1,2,3 and 4 are on the top right of my home/shop page behind a plus sign, which is really small.

I am concerned users will not see it and click on it to show the very important search bar, cart and product ratings etc.

What options do I have?

Can that plus sign be made bigger or extended out with text to highlight to users?

Or can I put it on my main nav bar?

I have also got the Ubermenu Widget Area under Ubermenu Advanced Items in Menus that I can add to my Primary Menu.

Can I add a Woocommerce search product widget from here to my main nav bar? How?

Please take a look.

[HelloParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in!

To make the “+” button a little bigger to make is visible, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

body .x-btn-widgetbar {
    font-size: 22px;
    border-top: 35px solid #566471;
    border-left: 35px solid transparent;
    border-right: 35px solid #566471;
    border-bottom: 35px solid transparent;
}

body .x-btn-widgetbar i {
    top: -20px;
    right: -25px;
}

And to add a widget in your Ubermenu, please check out this documentation right here: http://sevenspark.com/docs/ubermenu-3/content/widgets

[HelloParticipant]

Hi,
Thanks but on Chrome on 100% full screen the plus button overlaps the contact icon. I have attached a screenshot.

What browser did you use for the screenshot?

Please help with the question about adding a product search bar near/around the header/nav bar.

Thank you.

[RupokMember]

Hey there,

I have tried on Chrome fullscreens and it looks fine – http://prntscr.com/epbst7

Thanks!

[HelloParticipant]

Hi,
Do you think it is the space on my screen? I am using a laptop. I have tried it on IE11 and it’s the same problem. Screenshot attached. Or can the Contact icon be moved further left?

Also can the text “Search Products” be added next to to the plus sign? With an arrow pointing to the plus sign? The Contact icon can be moved further left as needed with sufficient spacing.

Can the plus sign be made even bigger?

Many thanks,

[ChristianModerator]

Another support member here and I don’t see the issue on my end. Tested in different browsers including IE. Also tested on 1366 x 768 px screen. To make the icon bigger, please increase the font-size in the code given previously.

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/.

Thanks for understanding.

[Author]

Posts