Return to previous page

Please help identify the right class for the 3rd (sticky) header

This topic has 3 replies, 2 voices, and was last updated 4 months, 3 weeks ago ago by Bas Kling

Bas Kling

Participant

November 24, 2023 at 09:50

Hi,

I would like to add a behaviour to the bottom header: backdrop-filter: blur(6px);
Can you please help me identify the right class to address?

(changing .header-bottom doesn’t do anything)

Please, contact administrator
for this information.

#374618 Copied Theme version: 9.2.3

2 Answers
Tony Rodriguez

Support staff

November 24, 2023 at 12:55
Hello, @Bas Kling,

I hope this message finds you well.

I would like to inform you that the current class for the bottom header on your website is designated as “header-bottom” Should you inspect this element within the context of a sticky header, the appropriate selector to reference would be:

body #header > [class*=header-wrapper] .sticky-on > .header-bottom

You may wish to experiment with these selectors. However, I must clarify that the blur effect will only be visible when applied over a background image. The blur is intended to affect the color or section overlaying the image. Since your current design utilizes a solid background color, the specific blur CSS may not function as intended.

For further information on the backdrop filter property, please consult the following resource: [MDN Web Docs – backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter).

As an alternative, I suggest experimenting with color transparency. Please try implementing the following CSS code, adjusting the values to suit your design needs:
```
body #header > [class*=header-wrapper] .sticky-on > .header-bottom {
    background-color: rgba(0,0,0,0.5) !important;
}
```
The expected result should resemble the example provided here: https://ibb.co/ZJQyjbC

Should you require any further assistance, please do not hesitate to reach out.

Best regards,
The 8Theme Team
#374639 Copied
Bas Kling

Participant

December 8, 2023 at 14:36

Thank you!

#376135 Copied
Tagged: 3rd header, class identification, help, sticky header, themes, woocommerce, wordpress
Viewing 3 results - 1 through 3 (of 3 total)

The issue related to '‘Please help identify the right class for the 3rd (sticky) header’' has been successfully resolved, and the topic is now closed for further responses

Please help identify the right class for the 3rd (sticky) header

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection