Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #583808

    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?

    #583998

    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

    #584407

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

    #586070

    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

    #586280

    The log details are in the private content

    #586986

    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

    #587436

    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.

    #587923

    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

    #590506

    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.

    #590734

    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

    #591146

    – 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.

    #591981

    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

    #592867

    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;
    }
Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Transparent header on mobile’ is closed to new replies.