Hi Yigit

Thank you for the tip.

Also there is a closed topic without any solution. not sure why
https://kriesi.at/support/topic/tabs-in-mobile/
Thank you very much

Yigit,

Did you fix this problem? I was checking it now and it seems solved?

The only problem that remains is on mobile. The blue bar is “floating” about 80px from the top when the user scrolls down and the 2 words are not aligned with the logo. Is there any “easy” solution for this?

Many thanks.

As I understand you like to hide the background video on mobile device and display only the background image correct?
For mobile, correct–I would like to display a static image of my choice for the mobile background only. For desktop, I would still like the looped background video to play however.

Please setup the background image and video to a color section and select the option that say’s “Hide video in mobile devices”.
If I set the background image and video to a color section, won’t that remove the video from showing on the desktop version?

Thank you!

Hi, thanks once more. Please note the issue is only partly resolved.
I have added the below CSS to the Child-Theme, effectively making most of the changes needed.

However, I am stuck on making two changes:
1. Color-Overlay for the image in the Color-Section. Is there a CSS that can change the color and opacity of this section accross the site? If so, would you be able to provide me with this?

2. I use the headline rotator. There is a “custom” color setting for the headlines. Would it be possible to change the Headline Color of the Headlines Rotator by CSS, and if so, what is the code for this?

If you have any suggestions to improve the below CSS, please do feel free to comment.
Thank you.

@import url(‘../enfold/style.css’);
#top .avia_message_box_content strong{color:#E74D7B;
}
.custom-color-heading strong{color:#E74D7B
;}
.slideshow_caption strong, div .slideshow_caption h2 strong{color:#E74D7B;
}
#top #wrap_all .custom-color-heading .av-special-heading-tag, #top .custom-color-heading a, #top .custom-color-heading strong, #top .custom-color-heading .special_amp{color: #E74D7B;
}
.av-section-color-overlay {
opacity: 0.4 !important;
overlay-color: #E74D7B !important;
}
#top .av_font_icon a{color: #E74D7B; display: block;
}
.av_font_icon.av-icon-style-border .av-icon-char{
color: #E74D7B;
border-color: #E74D7B;
}

We have upgraded our theme from 3.0.4 to 3.6.1 (please see the tittle of this thread). when we did, all the background header images stopped being responsive as they were in the old 3.0.4.

Basically this is the issue, UPGRADING FROM 3.0.4 breaks the responsiveness of the background images.

do you have a solution for this issue?

thanks,.

Hi Yigit,

This is the code I have now for the blue_section:

div#blue_section {
height: 32px;
min-height: 32px;
}

#blue_section {
    position: fixed;
    width: 100%;
    top: 82px;
    z-index: 99;
}

But it messed up the bar a bit.

Hi Yigit,

Thanks for your contribution.

Please look to the website (in Private).

I simply want the blue bar below the header permanently fixed with 2 words below the logo (and centered with the logo).

Many thanks.

PS – If you have a chance to look into my other post here, I would be very grateful :)