Sticky Header – Show Only Menu and Cart Icon on Scroll

Hi,

I’m using the WoodMart theme and I’d like to customize the sticky header behavior on scroll.

Currently, when I scroll down, the sticky header shows the logo, main menu, account icon, wishlist icon, and cart icon.

I’d like to simplify the sticky header and display only the main menu and the cart icon when the user scrolls. The logo, account, and wishlist icons should be hidden.

Could you please guide me on how to achieve this (via theme settings or custom CSS/JS)?

Thanks in advance for your support!

Hello zilabs.it,

Thanks for reaching to us.

1. Navigate to WoodMart > Header builder > edit default header (highlighted star icon) or you can go through admin bar directly https://prnt.sc/Ct9ehRDvvDV9.

Disable Sticky header clone option https://prnt.sc/uKCCAWsUbXg4

2. Add Cart element to Header Bottom and enable the option to make it sticky https://ibb.co/f0JvyqX

3. Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

header:not(.whb-sticked) .whb-header-bottom .wd-header-cart{
    display: none;
}

Please refer to documentation for more details

https://xtemos.com/docs-topic/woodmart-header-builder/
https://xtemos.com/docs-topic/how-to-enable-sticky-header-option/

Regards,
Hung PD

[Author]

Posts