Make mobile header transparency with Enfold Landing Page demo - Support

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

Author

Posts
November 23, 2019 at 3:23 pm #1159427
hartg
Participant
The following CSS works for a fresh site based on Enfold Child (General Styling > Quick CSS):
```
/* Make mobile header transparent */
@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
    background: transparent;
    position: absolute!important;
}}
```
How do I do this on the Enfold Landing Page demo? The CSS code above has no effect on mobile.
- This topic was modified 4 years, 5 months ago by hartg. Reason: Added code tags to CSS
November 23, 2019 at 3:29 pm #1159431

hartg
Participant

This reply has been marked as private.

November 24, 2019 at 4:02 pm #1159599
hartg
Participant
A possibly related question:

How do I change the background of the sticky header? All the standard ways as well as the solutions I found in this forum don’t work here (layout demo “One Page Landing Page”).

As a first step, I would be happy if I could change the background color of the sticky header.
- This reply was modified 4 years, 5 months ago by hartg.
November 24, 2019 at 11:05 pm #1159707
Mike
Moderator
Hi,
To make your mobile header transparent please try this css:
```
.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent !important; 
}
```
After applying the css, Please clear your browser cache and check.

Best regards,
Mike
November 25, 2019 at 7:40 am #1159761
hartg
Participant
Thank you, Mike,

Success. Great!

I only had to add “position” as in my first attempts and now it looks great (and transparent) on mobile.
```
.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent !important; 
    position: absolute!important;
}
```
Now, I also found a solution for the 2nd problem in this forum: How to make the sticky header also transparent after scrolling down (when it becomes opaque and white).
```
/* Set background of sticky header */
.header_color .header_bg {
    background: transparent;
}
```
Many thanks for your great support again and regards,
Hart
- This reply was modified 4 years, 5 months ago by hartg. Reason: Solution found now
November 25, 2019 at 12:07 pm #1159810

Mike
Moderator

Hi,
Glad we were able to help, and thanks for sharing your solution, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike
Author

Posts

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

The topic ‘Make mobile header transparency with Enfold Landing Page demo’ is closed to new replies.