Backdrop CSS

Hello Team,

I’m using Backdrop filter CSS on my website, the code working fine on the Chrome extension but the code not working on Safari and Firefox windows, I want to add Backdrop blur when I’m scrolling the header. kindly check the CSS code below:

backdrop-filter: blur(10px);
background: hsla(var(–white)/.3);
height: calc(var(–header-height) – 1px);

This code not working.

Please help me out of this issue

Best

Attachments:

You must be logged in to view attached files.

Hello,

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

.whb-sticked .whb-row, .whb-sticky-shadow.whb-sticked .whb-main-header { 
   background-color: rgba(0,0,0,0.4)!important; 
   backdrop-filter: saturate(180%) blur(20px);
   -webkit-backdrop-filter: saturate(180%) blur(20px);
}

Best Regards

Hello Team,

Thank you for sharing the Code.

It appears that the code is not functioning correctly on the Firefox browser, while it operates smoothly on Chrome.

Best

Hello,

Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site and then check the issue. I am sure your issue will be solved. Then Activate the 3rd party plugins one by one and check which plugin is creating the issue for you.

Otherwise, if the issue still exists then keep the 3rd party plugins deactivated and share the WP admin login details of your site so I will check and give you a possible solution.

Best Regards.

Hello,

I’ve added the code provided by you, but the issue persists on Firefox and Safari browsers. kindly the find the website WP Login details in the private Content.

Best

Hello,

Please update the new version of the theme “WOODMART WordPress NEW: 7.4.3 RELEASED” and update the required plugin and check the option.
https://xtemos.com/docs-topic/update-the-theme/

If the issue remains, turn off all of the plugins not related to the theme, refresh your cache, and check if the problem persists.

Moreover, switch to the parent theme, and recheck it. If the issue remains, let me know and I will check and give you a possible solution.

Best Regards.

Hello, I have already updated the theme and plugins but still have the same issue, the backdrop CSS code not showing on the Firebox issue.

Hello,

I have added the custom css in the Theme Settings > Global Custom CSS area and it is working fine. Check back your site after completely clearing the browser cache and check the issue.

Best Regards.

Still not working on firefox Window 🙁

Hello,

I have checked your site in the firefox browser and the header dropdown is working fine.
See video for clarification:
https://uploadnow.io/f/5c5KpcX

Check back your site after completely clearing the browser cache and check the issue.

Best Regards.

Hello,

Yeah its showed transparent not translucent header, can you please check the chrome window its showed blurred not transparent.

Best

Hello,

Please delete the old custom CSS code and use the below custom CSS code then the blur will remove from the header:

.whb-sticked .whb-row, .whb-sticky-shadow.whb-sticked .whb-main-header { 
   background-color: rgba(0,0,0,0.4)!important; 
   backdrop-filter: saturate(180%) blur(0px);
   -webkit-backdrop-filter: saturate(180%) blur(00px);
}

Best Regards.

Hello,

I have delete all the custom css still shown the issue 🙁 can you please check this issue for urgently.

Hello,

you haven’t included the latest custom CSS code. You’ve applied the custom CSS code in both Appearance > Customize > Additional CSS and in Theme Settings > Custom CSS.

Kindly delete the old CSS from Appearance > Customize > Additional CSS and insert the new CSS into Theme Settings > Custom CSS.

Best Regards.

Hello,

Yes, I have deleted the old CSS and added it to the theme’s CSS section. However, the issue persists. Could you please check from your side? It has been 12-15 days since we started discussing this issue, but unfortunately, it remains unresolved and I’m feeling quite unhappy about it. 🙁

Best

Hello,

OK, please try to use the below custom CSS code, I am sure your issue will be solved:

.browser-Firefox .whb-sticked .whb-main-header {
	transform: none;
}

Result in all browsers:

Chrome https://prnt.sc/qVmRPsjxsVN4
Safari https://prnt.sc/3xXaPtmHGxWN
Firefox https://prnt.sc/ShPkgr-J-wYF

Best Regards.

Hello Team,

Thank you so much this code working fine now on the firefox and chrome windows. 🙂

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.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts