How to make sticker header (main navigation top header bar) become Glass Effect?

Hi there,

We hope to add some Glass semi transparent look.
but can not locate the right css element to work with, enclosed is the image illustration, and below is some code tried to use. Could you pls help me out on the adjustment? thank you and will get one more copy this Friday.

simple Sample look reference site: https://www.afalcon-luxe.com/

/* Frosted Glass Effect for Savoy Theme Header */
#nm-header {
/* 1. Semi-transparent white background */
/* Adjust the ‘0.5’ value (alpha channel) for more or less transparency. */
background-color: rgba(255, 255, 255, 0.5) !important;

/* 2. The Frosted Glass Blur Effect */
/* Adjust the ‘8px’ value for a stronger or weaker blur. */
-webkit-backdrop-filter: blur(8px); /* For Safari compatibility */
backdrop-filter: blur(8px);

/* 3. Optional: Add a subtle white border for a more defined glass look */
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

Attachments:

You must be logged in to view attached files.

Hello,

Please add below Custom CSS code to Theme Settings > Custom CSS:

.whb-general-header {
    background-color: rgba(255, 255, 255, 0.5) !important; /* semi-transparent white */
    backdrop-filter: blur(8px); /* blur effect */
    -webkit-backdrop-filter: blur(8px); /* Safari support */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* optional subtle border */
}

Best Regards,

Hello Aizaz,

Good day.
It works perfectly, thank you very much!

kind regards,
Luie

Hello,

You’re Most Welcome!

Feel free to write back anytime. If you need further assistance, we are always here to help you.

If you have a minute, we’d truly appreciate your feedback — it helps us improve the product and shape future updates more effectively. We’d love your feedback on our theme: https://tally.so/r/w4l54k

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts