transparent header on Mobile - Support | Kriesi.at

Viewing 30 posts - 1 through 30 (of 37 total)

1 2 →

Author

Posts
November 20, 2017 at 6:04 pm #879259

moisturewordpress
Participant

Hi, Is it possible to make a transparent header also when it appears on mobile phones, just like on rolex.com (see it on mobile phone)
My site is https:///www.scalpinnovation.com
Thanks

November 21, 2017 at 6:15 pm #879854
Yigit
Keymaster
Hey Carsten,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
```
@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
    background: transparent;
    position: absolute!important;
}}
```
Best regards,
Yigit
November 22, 2017 at 12:00 am #879964
moisturewordpress
Participant
Hi Yigit. Thanks, it works! :)
But can we also get the Menu button, next to the logo (on the mobile phone) to be transparent?
And can we also make the header stick on Mobile phones?

Thanks
- This reply was modified 6 years, 11 months ago by moisturewordpress.
November 22, 2017 at 9:38 pm #880453
Victoria
Inactive Moderator
Hi moisturewordpress,

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
```
@media only screen and (max-width: 767px) {
  .responsive #top #main {
    padding-top: 80px !important;
  }
  .responsive #top #wrap_all #header {
      position: fixed;
  }
}
```
If you need further assistance please let us know.
Best regards,
Victoria
November 22, 2017 at 10:25 pm #880482

moisturewordpress
Participant

Hi Yigit. Ups… its transparent on Mobile but it should be fixed also

November 22, 2017 at 10:28 pm #880484

moisturewordpress
Participant

Hi Victoria, Yes fixed on Mobile but i also want it transparent

November 22, 2017 at 10:28 pm #880485
moisturewordpress
Participant
One more thing please… can we also get the Menu button, next to the logo (on the mobile phone) to be transparent?
- This reply was modified 6 years, 11 months ago by moisturewordpress.
November 25, 2017 at 8:14 am #881524
Nikko
Inactive Moderator
Hi,

I don’t think changing the menu buttons background color to be transparent would help since you have a white background. You can change the background color (would suggest other colors) of the menu button by adding this css code in Quick CSS:
```
#top #advanced_menu_toggle {
    background-color: transparent;
}
```
put it inside this part of the code Victoria gave:
```
@media only screen and (max-width: 767px) {
```
Hope this helps.

Best regards,
Nikko
November 27, 2017 at 11:02 pm #882381

moisturewordpress
Participant

Hi Victoria, Yes fixed on Mobile but i also want it transparent

November 28, 2017 at 11:58 am #882600

Victoria
Inactive Moderator

Hi moisturewordpress,

Transparent will not work in this case. It will be mixing in with content and neither will be readable.

Best regards,
Victoria

November 28, 2017 at 12:58 pm #882669

moisturewordpress
Participant

Hi Victoria
I would like it to be as this site, Trans parent and fixed:

https://m.rolex.com

:)
Carsten

December 1, 2017 at 7:28 am #883728

Ismael
Moderator

Hi,

The transparent header works well on the rolex site because it contains a video background which also works as the header’s backdrop. How would you like the header to look on mobile view? Please provide a screenshot or mock up of the layout that you have in mind on imgur or dropbox.

Best regards,
Ismael

December 1, 2017 at 11:09 am #883824

moisturewordpress
Participant

Hi Ismael
I would like the mobil and desktop version/layout to be just the same layout as Rolex.com

The header is transparent and when you scroll the header turn white and get fixed.

Also the video is automatically playing on a mobile device.

December 4, 2017 at 4:17 am #884500
Ismael
Moderator
Hi,

Please add this code inside the css media query.
```
.responsive #top #main {
    padding-top: 0;
}

#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
    background-color: transparent;
}
```
Best regards,
Ismael
December 4, 2017 at 12:00 pm #884595

moisturewordpress
Participant

Hi Ismael
It dosen’t work. See https://moisture.dk/video-test

1) The video dosen’t play
2) The header isn’t fixed

Carsten

December 5, 2017 at 2:27 pm #885066

Ismael
Moderator

Hi,

1.) The video background is disabled on mobile devices by default, that’s why you have to add a fall back image. Please use the layer slider’s video background option instead.

2.) Did you add @Yigit’s suggestions?

Best regards,
Ismael

December 6, 2017 at 12:54 pm #885555

moisturewordpress
Participant

Hi Ismael
Sorry but I’m a little confused.
Is it possible to make a full screen video background on mobile or not? (Like Rolex.com)

I have tried to put code in from Yigit, Victoria and Nikko but but either is the header transparent but not fixed or else is it opposite.

:) Carsten

PS: is Layerslider something I have to buy or is it free for my theme?

PS. Is layer

December 6, 2017 at 5:35 pm #885682

Victoria
Inactive Moderator

Hi moisturewordpress,

Layer Slider is free, it comes with the theme. Only the premium features are not available, but they are not necessary to make a video background.

Best regards,
Victoria

December 6, 2017 at 5:36 pm #885683

Victoria
Inactive Moderator

Hi moisturewordpress,

Layer Slider is free, it comes with the theme. Only the premium features are not available, but they are not necessary to make a video background.

Best regards,
Victoria

December 6, 2017 at 6:45 pm #885723

moisturewordpress
Participant

Hi Victoria, are you going to answer the rest of my question or do I wait for Ismael?

December 7, 2017 at 6:06 am #885935
Ismael
Moderator
Hi,

Is it possible to make a full screen video background on mobile or not? (Like Rolex.com)

1.) It’s not possible with the theme’s element so you have to use the layer slider instead. Create a layer, switch to the Video/Audio type then enable the “Use this video as slide background” option.

2.) Please combine the css modifications.
```
@media only screen and (max-width: 767px) {
    #top #wrap_all #header {
        position: fixed !important;
    }

    .responsive #top #main {
        padding-top: 0;
    }

    #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
        background-color: transparent;
    }
}
```
Best regards,
Ismael
December 8, 2017 at 4:15 pm #886535

moisturewordpress
Participant

Hi Ismael
It cant or dose not play by auto on mobile?

Video test

https://www.dropbox.com/s/izca1zt6lr30arl/mobile.png?dl=0

December 9, 2017 at 6:40 pm #886937

Ismael
Moderator

Hi,

Is the slider set to automatically play videos? You can find the option in the Slider Settings > Videos panel. What is the actual model of the device? It looks pretty small.

Best regards,
Ismael

December 9, 2017 at 10:33 pm #886986

moisturewordpress
Participant

Hi Ismael.
Yes it is set to automatically play… please se files: https://www.dropbox.com/sh/h415i1i868pn5cv/AACALOvjAQ6Gy7rZHt5v2_k2a?dl=0

The device is iphone 6

December 12, 2017 at 3:28 am #887679
Ismael
Moderator
Hi,

Thank you for the update. Append the autoplay parameter (?autoplay=1) in the youtube url and set it to 1 or true. Example:
```
http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1
```
Best regards,
Ismael
December 12, 2017 at 10:33 am #887807

moisturewordpress
Participant

Hi Ismael
I can not make it work. Can you test “? Autoplay = 1” in LayerSlider before answering

Se my video here: https://www.dropbox.com/s/qgesjexepkmis0b/autoplay.mov?dl=0

Best regards,
Carsten

December 13, 2017 at 1:16 pm #888306
Ismael
Moderator
Hi,

Yes, I was able to reproduce the issue. Please try this shortened version of the youtube url.
```
<iframe width="560" height="315" src="http://bit.ly/2Cd6h3V" frameborder="0" allowfullscreen></iframe>
```
Best regards,
Ismael
December 13, 2017 at 4:36 pm #888428

moisturewordpress
Participant

Sorry… its not working. Can you upload a screen video so i can see how you make it so it works on desktop and mobile.
Where is it i should paste the code? https://www.dropbox.com/s/vw99cguu3nsrtva/Sk%C3%A6rmbillede%202017-12-09%20kl.%2021.21.06.png?dl=0

December 14, 2017 at 2:24 am #888696

Ismael
Moderator

Hi,

Where is it i should paste the code?

You should replace the value in the Video/Audio field with the iframe code above. It’s still the same code but we hid the url so that the editor won’t reject the “autoplay” parameter.

Best regards,
Ismael

December 14, 2017 at 4:21 pm #888942

moisturewordpress
Participant

Dear Ismael. It’s getting confusing now and I still can’t make it work.

Do you mind taking it from the beginning, guiding me step by step with a random video from YouTube.

Thanks a lot – Carsten
Author

Posts

Viewing 30 posts - 1 through 30 (of 37 total)

1 2 →

You must be logged in to reply to this topic.