Setting background overlay - Support | Kriesi.at

Viewing 26 posts - 1 through 26 (of 26 total)

Author

Posts
September 27, 2023 at 1:14 am #1420629

Stilecatalini
Participant

Hello. I’m trying to obtain opacity in my overlay burger background but when I change opacity (0,9) the screen become gray and not black opaque. Why?

Code snippet

September 28, 2023 at 10:51 am #1420781
Yigit
Keymaster
Hey,

Please add the following code to the Quick CSS field in Enfold theme options > General Styling tab:
```
div.av-burger-overlay-bg {
  background: transparent;
}
```
Regards,
Yigit
September 28, 2023 at 11:08 am #1420791

Stilecatalini
Participant

Doesn’t work.

September 29, 2023 at 10:15 am #1420873

Yigit
Keymaster

Hey,

Please make sure that there isn’t any errors in your custom CSS codes ( http://csslint.net/ ) and that you’ve cleared the caches.

Regards,
Yigit

September 29, 2023 at 11:46 am #1420886

Stilecatalini
Participant

#top #wrap_all #header_main .av-burger-overlay-scroll {
-webkit-backdrop-filter: saturate(0.9);
backdrop-filter: saturate(0.9);
background: rgba(0,0,0,0.9);
}
@media only screen and (max-width: 767px) {
#top #header.header-scrolled .header_bg {
background-color: rgba(20, 21, 23, 0.9);
-webkit-backdrop-filter: saturate(0.9);
backdrop-filter: saturate(0.9);
}
}
@media only screen and (max-width: 989px) {
#top #header.header-scrolled .header_bg {
background-color: rgba(20, 21, 23, 0.9);
-webkit-backdrop-filter: saturate(0.9);
backdrop-filter: saturate(0.9);
}
}
#top #header .header_bg {
background-color: rgba(20, 21, 23, 0.9);
}
#top #header.av_header_transparency .header_bg {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
#top .av_header_transparency,
#top .av_header_transparency .header_bg {
background: transparent !important;
}

September 29, 2023 at 11:46 am #1420887

Stilecatalini
Participant

Mike’s code.

October 2, 2023 at 10:19 am #1421096

Yigit
Keymaster

Hey,

Is this all custom CSS you have in Enfold theme options > General Styling > Quick CSS and Appearance > Customize > Additional CSS fields?

If it is, please create temporary admin logins and share them with us in the private content field so we can look into it.

Best regards,
Yigit

October 2, 2023 at 11:10 am #1421105

Stilecatalini
Participant

Check.

October 2, 2023 at 11:39 am #1421107

Yigit
Keymaster

Hey,

There was an error in the Quick CSS field and the code I provided was missing. After fixing the error and adding the code, it works as expected.

Best regards,
Yigit

October 2, 2023 at 11:42 am #1421110

Stilecatalini
Participant

So now is there a little bit of transparency? Seems yes?! Right?

October 2, 2023 at 11:44 am #1421112

Stilecatalini
Participant

I don’t like that you can scroll down and the logo scroll also. So you see the logo below.
The logo should be fixed.

October 2, 2023 at 11:45 am #1421113

Yigit
Keymaster

Hey,

Feel free to hire a freelance developer for further customization.

Best regards,
Yigit

October 2, 2023 at 3:34 pm #1421150

Stilecatalini
Participant

Where you have changed the css code? Code snippet? I can’t find about transparency……

October 2, 2023 at 3:38 pm #1421153

Stilecatalini
Participant

Or is this?

#top div.av-burger-overlay-bg {
background-color: transparent;
}

But if i change transparent with another name like white or yellow, doesn’t change. WHY??????????????????

October 2, 2023 at 3:39 pm #1421155
Yigit
Keymaster
Hey,

I added the code to the bottom of Enfold theme options > General Styling > Quick CSS.

You are setting the background color with the following custom CSS:
```
#top #wrap_all #header_main .av-burger-overlay-scroll {
    -webkit-backdrop-filter: saturate(0.9);
    backdrop-filter: saturate(0.9);
    background: rgba(0,0,0,0.9);
}
```
Best regards,
Yigit
October 2, 2023 at 3:40 pm #1421156

Stilecatalini
Participant

Waiting for your update to change the overlay of the buttons that NOW DOESN’T WORK!

October 2, 2023 at 3:42 pm #1421157

Stilecatalini
Participant

There isn’t your code there…..

October 2, 2023 at 3:44 pm #1421158

Stilecatalini
Participant

Tried to add that but not changing… LOL!!

October 2, 2023 at 3:44 pm #1421159

Stilecatalini
Participant

Let it be. It’s ok black……..LOL

October 2, 2023 at 3:48 pm #1421162

Stilecatalini
Participant

Is possible to fix the overlay without scrolling down on mobile?

October 2, 2023 at 4:24 pm #1421173

Yigit
Keymaster

Hey,

You added it as a snippet in the Code Snippets plugin. See the link in the private content field below.

You are setting the background color to black ( “0,0,0” ) with that code with 0.9 opacity. Edit this line “background: rgba(0,0,0,0.9);” and change it to “background: rgba(0,0,0,0.7);”if you’d like to apply less opacity.

Best regards,
Yigit

October 2, 2023 at 11:01 pm #1421209

Stilecatalini
Participant

Ok, please reply to my last request. If possible.
Thanks

October 5, 2023 at 2:20 pm #1421483

Yigit
Keymaster

Hey,

I’m not sure if I understand your question. Please share more details and send us a screenshot.

Best regards,
Yigit

October 5, 2023 at 2:38 pm #1421487

Stilecatalini
Participant

Open the burger with phone and scroll down: all scroll down, logo included. This should not be scrollable.

October 9, 2023 at 10:31 am #1421884
Yigit
Keymaster
Hey,

Try adding the following CSS code to your custom CSS:
```
#top .av-burger-overlay-inner, #top .av-burger-overlay-bg {
min-height: unset !important;
}
```
Regards,
Yigit
October 9, 2023 at 1:28 pm #1421908

Stilecatalini
Participant

Well. Close. Thanks.
Author

Posts

Viewing 26 posts - 1 through 26 (of 26 total)

The topic ‘Setting background overlay’ is closed to new replies.