Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • February 15, 2016 at 10:55 pm #583808
    Dutchman

    I’m using the following code to make the header transparent on a mobile phone:

    @media only screen and (min-width:481px) and (max-width: 767px)  {
#header, #header * { background: transparent !important; }
#header { position: fixed !important; }
}

    How can i make this solid as soon as i scroll down, as it does on desktop?

    February 16, 2016 at 9:40 am #583998
    Yigit

    Hi Reisfreaks!

    Please change your code to following one 

    @media only screen and (min-width:481px) and (max-width: 767px)  {
#top #wrap_all .av_header_transparency { background: transparent !important; }
#header { position: fixed !important; }
}

    Regards,
    Yigit

    February 17, 2016 at 12:16 am #584407
    Dutchman

    Hi Yigit!
    Then there is no transparency even without scrolling ;)

    February 19, 2016 at 2:35 pm #586070
    Andy

    Hey!

    can you provide us admin access, so we can check it on your end? we need to make some tests for mobile.

    Cheers!
    Andy

    February 19, 2016 at 8:03 pm #586280
    Dutchman

    The log details are in the private content

    February 22, 2016 at 9:48 am #586986
    Ismael

    Hi!

    Fixed positioning isn’t entirely supported across all platforms. You might want to consider disabling it on mobile devices: http://bradfrost.com/blog/mobile/fixed-position/

    Cheers!
    Ismael

    February 22, 2016 at 8:30 pm #587436
    Dutchman

    Hi Ismael,

    As soon as i remove the code #header { position: fixed !important; } it allso removes the transparent background, with our without scrolling.
    I would like the header to be transparent between certain mobile resolutions, fixed or not fixed.

    February 23, 2016 at 7:54 pm #587923
    Andy

    Hey!

    try this code:

    #header_main {
background: transparent;
}

    If this still does not help then please send us screenshots and a precise link where we can see the issue.

    Best regards,
    Andy

    February 28, 2016 at 10:56 pm #590506
    Dutchman

    Hi Andy,
    This changes my header background color from brown to gray but its not transparent. Transparent without a fixed header position would be perfect! The login details are in my 3th respond like you asked me to provide. This is what i’m using for now: 

    @media only screen and (min-width:481px) and (max-width: 767px)  {
#header, #header * { background: transparent !important; }
#header { position: fixed !important; }
}

    Its transparent but i would like it to be transparent without a fixed header position like Ismael adviced.
    As soon as i leave #header { position: fixed !important; } out of it, the transparency is gone.

    February 29, 2016 at 2:08 pm #590734
    Andy

    Hey!

    change my code to “red” instead of “transparent” and you will see that it’s working. What do you want to shine through the transparency? I mockup showing the results you want to achieve would be helpful.

    Cheers!
    Andy

    February 29, 2016 at 10:15 pm #591146
    Dutchman

    – The first picture shows the header with a brown background instead of a transparent background between 481px and 767px. You can see this when you visit the homepage and rezize the screen (481px – 767px)
    – The second picture shows the transparancy the way i would like it, only this screenshot is taken in 1920 x 1080.
    You can see this when you visit the homepage and rezize the screen to 1920 x 1080.

    March 2, 2016 at 10:01 am #591981
    Ismael

    Hi!

    The transparency is not obvious because there’s nothing under the header. Try to move the slider upwards: 

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

    Regards,
    Ismael

    March 3, 2016 at 7:52 pm #592867
    Dutchman

    Ismael!!! You did it! Thank you :D
    Transparent non fixed-position header on mobile in landscape modus.

    @media only screen and (min-width:481px) and (max-width: 767px)  {
#header, .header_bg, #header * { background: transparent !important; }
.responsive #top #main {
margin-top: -82px;
}
  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Transparent header on mobile’ is closed to new replies.