Make different header section sticky on mobile and desktop

Hi,

I know that the Woodmart header consists of three rows.

1. whb-top-bar
2. whb-general-header
3. whb-header-bottom

I want the second row to be sticky in the desktop and the third to be sticky on mobile.

To sum up,

On Desktop
—
Non-sticky: whb-top-bar
Sticky: whb-general-header
Non-sticky: whb-header-bottom

On Mobile
—
Non-sticky: whb-top-bar
Non-sticky: whb-general-header
Sticky: whb-header-bottom

Thanks,
Ashith

Hello,

First of all thanks for choosing our Theme, we are glad to be you in WoodMart WordPress family :)

There is no such option to make a row sticky on mobile layout only and not in the desktop. Because the row is the same and sticky option is same for both the screen sizes.

But you can make both the rows “whb-general-header” and “whb-header-bottom” sticky from WoodMart >> Header Builder >> Your default header. And then use the below CSS code in Custom CSS for desktop area under theme settings >> custom CSS to hide “whb-header-bottom” sticky row in desktop and “whb-general-header”” sticky row in mobile.

.whb-sticked .whb-header-bottom{
display:none;
}

Use the below CSS code in Custom CSS for mobile area:

.whb-sticked .whb-general-header{
display:none;
}

Best Regards.

Hello,

I did exactly the same as suggested. The settings seem to be working for desktop. But, not on mobile. Both rows remain sticky on mobile.

Code I added: https://imgur.com/a/9hLo5BL

Thanks.

Hello,

I have seen your screenshot, I’m glad that it works for desktop screens.

Kindly share your admin login credentials, So I can access your admin area and help you to apply the CSS code so that on the mobile screens the general header row will not shown sticky and only the header bottom row will shown as sticky on mobile.

Best Regards.

Hello,

Thanks, Aizaz. I have disabled WP Rocket and added Dev mode in Cloudflare. Please go ahead and check the CSS from your end.

Thanks.

Hello,

Also while you are at it, can you please check why the view cart button is displaying text in dark colour? I believe I have given white text in all settings. Can you please check this as well?

Hello,

Your problem is resolved. The general header row goes hidden when I use the below CSS code in “Custom CSS for mobile” and undo your code from global custom CSS area:

.whb-sticked .whb-main-header .whb-general-header  .whb-general-header-inner{
display:none;
}

Result: https://jmp.sh/Kg8iUMH

I paste your custom code back, but you must have to delete your custom code from global custom CSS area so that my provided code will work for header.

About your sidebar car, to display the view cart button in white color which shown in you sidebar cart. You can use the below CSS code in global custom CSS area:

.btns-default-dark .widget_shopping_cart .buttons .btn-cart{
color:white;
}
	
.btns-default-dark .widget_shopping_cart .buttons .btn-cart:hover{
color:white;
}

Result: https://jmp.sh/phy9fhT

Best Regards.

Hello Aizaz,

Thanks a lot for stepping in. It looks like I forgot to close a curly brace for the custom code I had added before which created issues with the CSS you have provided. I have fixed my custom code issue and the CSS you provided in the first reply itself works just fine.

Thanks again for all the help.

Really brilliant theme you guys have!

keep up the good work.

Thanks,
Ashith

Most Welcome :)

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

If you do not mind, can you please leave 5 stars rating for our theme 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