mobile header

Hello,

1. Navigate to WoodMart > Header Builder.

2. Edit the Default Header (the one with the highlighted star icon) — or you can access it quickly through the Admin Bar. Here’s a screenshot for reference: https://prnt.sc/Ct9ehRDvvDV9

3. Switch to the Mobile tab inside the Header Builder.

4. Now you can add and arrange elements specifically for mobile without affecting the desktop layout.

You can easily switch between Desktop and Mobile views at the top to customize them separately.

Best Regards,

Hello,

The issue is caused by having white text on a white background in the header, which makes it invisible. Try changing the button color using the header builder and see if that resolves it.

Best Regards,

Hello,

You don’t need to change the icon size—simply adjust the button’s background and text color, and it should become visible.https://ibb.co/VcWqzprX

Best Regards,

Hello,

Now I have checked your site, and the icons are showing on your site. Maybe it is an issue with the white color.
https://ibb.co/My51MBpj

If you have any questions, feel free to contact us.

Best Regards,

Hello,

Add the below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile:

.whb-main-header .btn-size-small {
    --btn-padding: 0px 0px !important;
}
.whb-main-header .whb-column>.info-box-wrapper, .wd-header-text, .whb-column>.wd-button-wrapper, .whb-column>.wd-social-icons, .wd-header-html {
    padding: 5px !important;
}

Best Regards,

Hello,

Add the below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile:

.whb-column>.info-box-wrapper, .wd-header-text, .whb-column>.wd-button-wrapper, .whb-column>.wd-social-icons, .wd-header-html {
    padding-inline: 2px !important;
}

Best Regards,