Transparent header issues (Enfold)

Hi!

Please tell your designer to edit the your logo and make its background transparent. Currently it is white and that is what you are seeing when header is set to display transparent :)
then go to Enfold theme options > Header Layout > Mobile Menu > Header Mobile Menu activation and choose 990px

Cheers!
Yigit

Hi

Please add following code to Quick CSS in Enfold theme options under General Styling tab

@media only screen and (max-width: 767px) { 
.responsive #main {
margin-top: -82px;
}}

Cheers!
Yigit

Hey!

I wanted to take another look but seems like you password protected your pages once again. Can you post the password if you do not mind? :)

Cheers!
Yigit

Hi!

Please try following code as well

@media only screen and (max-width: 768px) {
li.av-single-slide.slide-1.active-slide { background-position: 50% 100%; }}

Regards,
Yigit

Hey Kayzel!

How about turning on custom CSS field for Avia Layout Builder elements ( see – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and adding an image right below fullscreenslider and showing it only on mobile and removing fullscreen slider on mobile as a workaround?

Cheers!
Yigit

Hey!

Please edit your Fullscreen Slider and add a custom class as shown here – http://i.imgur.com/gyWyH7e.png
and then add an image element right below it in Avia Layout Builder and give it a unique class as well. Then add following code to Quick CSS in Enfold theme options under General Styling tab

@media only screen and (max-width: 768px) {
.unique-class-slider { display: none !important; }
.unique-class-image { display: block !important; }}
@media only screen and (min-width: 768px) {
.unique-class-image { display: none !important; }
.unique-class-slider { display: block !important; }}

Cheers!
Yigit

Hey!

Can you try changing 768px values to 990px in the code i posted here – https://kriesi.at/support/topic/transparent-header-issues-enfold/#post-268580

Cheers!
Yigit

Hi!

Right click is disabled so i cannot check the source code but it seems like you have added image below slider or am i mistaken? It seems like custom CSS code is not being applied as well :)

Cheers!
Yigit

Hey!

I see that you have added custom class “unique-class” for slider. Can you please edit the element and change the custom class to “unique-class-slider”? Then code i posted should work. If you add an image element under your slider, please use “unique-class-image” as custom class

Cheers!
Yigit