Viewing 30 posts - 1 through 30 (of 37 total)
1 2
  • Author
    Posts
  • November 20, 2017 at 6:04 pm #879259
    moisturewordpress

    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

    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

    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

    November 22, 2017 at 9:38 pm #880453
    Victoria

    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

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

    November 22, 2017 at 10:28 pm #880484
    moisturewordpress

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

    November 22, 2017 at 10:28 pm #880485
    moisturewordpress

    One more thing please… can we also get the Menu button, next to the logo (on the mobile phone) to be transparent?

    November 25, 2017 at 8:14 am #881524
    Nikko

    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

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

    November 28, 2017 at 11:58 am #882600
    Victoria

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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.