Adding search bar icon and “hamburger” menu in sticky header

Hello,
is there a way to add a search bar icon and the “hamburger menu” (like in mobile) to the sticky header clone on desktop ?

Hello,

Sorry but it is not possible to edit the sticky header clone.

Please Go to WoodMart >> Header Builder >> Edit header >> Header Settings.

Disable the sticky header clone option and then you need to specify which header you want to show as sticky from settings.

Screenshots for Clarification: https://ibb.co/Xt2VdXS
https://ibb.co/9nXmSCc

Best Regards

Hello,

if I enable sticky header for one row, can I add search icon and hamburger menu to it by custom css so that they only show when that row becomes sticky (when you scroll down)?

Hello,

You can add the elements to the main header and then I will provide CSS to hide for the main header then they will only be displayed on sticky header.

Best Regards

Hello,

that sounds good, I’ll add them as soon as I get css.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Desltop area under Theeme Settings >> Custom CSS.

.whb-general-header .wd-tools-element.wd-header-mobile-nav.wd-style-icon, .wd-header-search {
display: none;
}

.whb-sticked .whb-general-header .wd-tools-element.wd-header-mobile-nav.wd-style-icon, .wd-header-search {
display: flex;
}

Best Regards

Hello,

thank you for help, but I couldn’t change mobile menu to make menu I wanted to display dropdown.
What I wanted to make is category dropdown menu but with only the “hamburger menu” icon (like in mobile menu) when in sticky header.

I’ve changed css you provided to be used for category dropdown instead of mobile menu:

.whb-general-header .wd-header-cats {
display: none;
}

.whb-sticked .whb-general-header .wd-header-cats {
display: flex;
}

So is there a way to make categories dropdown appear with icon and without text or arrow, only on main header?

Hello,

Could you please elaborate what you require with the help of some relevant screenshots to check it myself and help you out accordingly.

Best Regards

[lukasopalovic97]

Also can you remove screenshot 3 (or whole post, I’ll repost it), it displays private information by accident, I’m unable to delete it.

• This reply was modified 2 years, 9 months ago by lukasopalovic97.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.whb-sticked span.menu-open-label, .menu-opener:after {
display: none;
}

Best Regards

Hello,
that solved my problem, thank you. Could you remove my post with screenshots or just screenshot 3 like I asked previously?

Hello,

We are Glad that you loved our Theme and Support Staff. We wish you all the best.

If you do not mind, can you please leave a 5 stars rating for our Theme & Customer and Technical Support by going here: http://themeforest.net/downloads It will allow us to release more updates and provide dedicated support in future. It would encourage our work a lot. If you like our Theme and Support.

Thanks for contacting us.
Have a great day :-)

Topic Closed.
Best Regards.

[Author]

Posts