Header Top bar – Mobile & Tablet

Hello Support,

I am using Top bar for Mobile and Tablet header elements. Please see the attached screenshot.

I want to have three columns in the top bar of Mobile.

Now in Mobile layout’s under TOP BAR row, there is only one column to add content, instead of in Desktop layout has 3 columns in TOP BAR row which able to add content in left, center and right side.

How can I add left, center and right column into Mobile layout’s TOP BAR row?

I want to have Mobile menu in left, Logo in center and My account Icon and Cart Icon in right corner on MOBILE and TABLET. Without three column how can I do that.

Please advise, thank you.

Regards,
Alex

Attachments:

You must be logged in to view attached files.

Hello,

Sorry but unfortunately there is no option in Theme Settings to add three columns on mobile header topbar.

Best Regards.

Hello Aizaz,

Can you please provide me the CSS to display the Mobile menu in left, Logo in center and My account Icon and Cart Icon in right corner in Tablet only.

Thank you.

Regards,
Alex

Hello,

Please try and add the following Custom CSS in the Custom CSS for tablet area under Theme Settings >> Custom CSS.

.whb-sticky-row .woodmart-burger-icon {
position: absolute;
left: 2%;
}

.woodmart-shopping-cart.wd-tools-element.woodmart-cart-design-5 {
position: absolute;
right: 2%;
}

.woodmart-header-links.my-account-with-icon {
position: absolute;
right: 7%;
}

Best Regards.

Hello Aizaz,

Working perfectly!

Thank you very much 🙂

Regards,
Alex

Well, @alexurth!.., it’s been great chatting with you! I hope I resolved your issues thoroughly.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts