sticky header menu changes

I want instead of main nav. menu as sticky (as marked on 1st image) i wanted a search bar (as marked on 2nd image), the logo and all other things should remain same on the sticky header

Attachments:

You must be logged in to view attached files.

Hello,

You need to disable the header clone: https://xtemos.com/docs/woodmart/header-builder/global-header-settings/

Then make the row you want sticky: https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/

As a result, your row with the elements as they are would be sticky.

Best Regards

i did as you told its not working still it shows the same

Hello,

Please provide your site admin access to the private area. I will check the settings.

Best Regards

also kindly remove the negative symbol on product offer label

Hello,

Please check your header now: I have deactivated the cloned header and there is one row sticky.

Best Regards

You have done the changes thanks, but there is a issue, when i hover on categories and scroll down it disappears https://www.awesomescreenshot.com/video/2277970?key=8f30763d2840636fe823e51d13dc6222 check this video

Hello,

Please add a duplicated Product category element in the sticky row, I will provide CSS to show it only in the sticky header.

Best Regards

but see i can’t scroll to the categories, even if i scroll down only page gets scrolled not the categories

Hello,

Please make a screen of what you mean.

Best Regards

check the link
https://www.awesomescreenshot.com/video/2297270?key=af6256f4760d4ffe91779a2e28a70250 the error i’m facing

Hello,

Yes, this is the way mega menu blocks are displayed. When you scroll the menu block, it is scrolled, but the site is scrolled under the menu. Users would scroll either menu on either site but not both at the same time.

Best Regards

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .whb-general-header .header-categories-nav{
display:none;
}
body .whb-sticked .whb-general-header .header-categories-nav {
display:block!important;
}

This code would hide the categories in the middle row and show only on sticky.

Best Regards

[Author]

Posts