Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1483342

    Hi

    As I mentioned in the title, I want a transparent header on mobile that turns solid black when scrolling.
    It works fine on desktop, but I can’t get it to work on mobile.

    Just in case this issue is caused by me tweaking the theme settings for hours, I’ve attached the login credentials so you can have a quick look before suggesting any CSS code.

    Best regards
    Roland

    #1483374

    Hey Scanmark,

    Thank you for the inquiry.

    The sticky behavior and transparent layout options are disabled on mobile view by default but you can try this css code:

    @media only screen and (max-width: 767px) {
      /* Add your Mobile Styles here */
      .responsive #top #wrap_all #header {
        position: fixed;
        top: 0;
      }
    }

    Best regards,
    Ismael

    #1483408

    Hi Ismael

    Thanks for your rapid response. I pasted the CSS code above to my Quick CSS panel, but that didn’t solve my issue.

    Any other suggestions?

    #1483428

    Hi,

    It seems to be working correctly when we checked. Please try to purge the cache or remove the browser history.

    View post on imgur.com

    Best regards,
    Ismael

    #1483485

    Hi

    I’ve purge the cache and tested it on mobile view on both Samsung Internett browser and Google Chrome.
    I’ve also tested it on a co-workers mobile, but the error still remains.

    The header in mobile view is black when opening any page and it remains black when scrolling down, with the exception of a brief flickering on the header when I start scrolling.

    In case there is any misunderstanding, I’ll just clarify:
    I want the header to be transparent when the pages loads and then go to solid black when I start scrolling down.
    The same way as on the desktop version…where it works brilliant!

    #1483590

    Hi,

    The header’s background color is initially transparent and changes to black on scroll. Please check the screenshot below:

    View post on imgur.com

    Best regards,
    Ismael

    #1483594

    Hi

    I’ve tested it again, on several different phones, on various browsers and purged the cache on my phone.
    And it’s not transparent at my end.

    I do however get that brief flicker of transparency when I start scrolling down, but then it returns to solid black again.

    View post on imgur.com

    Best regards
    Roland

    #1483602

    Hi,

    Have you tried purging the cache or completely removing the browser history? You can also switch to incognito mode.

    Best regards,
    Ismael

    #1483606

    Yeah…as I’ve mentioned before…I’ve tested it on several different phones that hasn’t been used at this URL previously , on various browsers and purged the cache on my phone.

    #1483665

    Hi,

    Thank you for the update. Try adding this css code and let us know the result.

    @media only screen and (max-width: 989px) {
    
      /* Add your Mobile Styles here */
      .responsive #top #wrap_all .av_header_transparency {
        background-color: transparent !important;
      }
    }

    Best regards,
    Ismael

    #1483674

    Hi,

    I added the code, cleared the cache, and checked the result on both my phone and other phones that hadn’t accessed the site before. It still shows a solid black at the top, flickers slightly to transparent when I start scrolling, and then turns black again.

    If it’s not possible to achieve the effect I want, I’d at least like to eliminate the flickering.

    #1483675

    see here my test page: https://webers-testseite.de/

    my code to have a fixed header on mobile first – then after scroll a header with background-color:
    because i do not see your page – the values ( of height / line-heigt etc. had to be adjusted ) – and I can give no better advice.
    if your breakpoint is at 767px – change the media-query.

    @media only screen and (max-width: 989px) {
        .responsive #top #wrap_all #header .container {
            width: 95%;
            max-width: 95%;
        }
    
      /* === values depends on if header_meta is present (80px + 35px) === 35px is the min-height of header_meta */
      #top #header {
        position:fixed !important;
        height:115px !important;
        max-height:115px !important
      }
    
        #top #header.av_header_transparency #header_meta {
            background-color: transparent;
        }
    
        #header_main {
            border-bottom: none;
        }
    
        #header:not(.av_header_transparency) #header_main {
            box-shadow: 0 5px 10px #eee;
        }
    
        .responsive #top .av-logo-container ,
        .responsive #top .logo a,
        .responsive #top .logo img,
        .responsive #top .logo svg {
            height: 80px !important;
            max-height: 80px !important;
            line-height: 80px !important;
        }
    
        .responsive #top .av-main-nav .menu-item-avia-special a {
            height: 80px !important;
            line-height: 80px !important;
        }  
    
        .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
            background-color: transparent !important;
        }
    
        #top .header_bg {
            background-color: transparent !important;
        }
    
        #top #header:not(.av_header_transparency) .header_bg {
            background-color: #FFF !important;  / *** change to your needed bg-color *** /
        }
    
        .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, 
        .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
        display: block !important;
        }
    
        .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, 
        .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
        opacity: 0;
        }
    
        /*** if you got header_meta ***/
        #top #header.av_header_transparency #header_meta .phone-info * {
            color: #FFF !important;   / *** change to your needed bg-color *** /
        }
    
        .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner, 
        .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::before, 
        .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::after {
            background-color: #FFF;  / *** change to your needed bg-color *** /
        }
        .html_mobile_menu_tablet .header_color  #header.av_header_transparency .menu-item-search a:before {
            color: #FFF;  / *** change to your needed bg-color *** /
        }
        .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
            padding-top: 80px !important;
        }
        .responsive.html_header_top.html_header_transparency.html_mobile_menu_tablet  #top #main {
            padding-top: 0 !important;
        }
    }

    there might be some rulesets not neccessary for your setting – but as mentioned above your page is in maintainance mode.

    #1483731

    Hi,

    That’s odd. We created a short clip showing how it looks on our end (see private field) — ignore the red background (that’s a custom modification while testing). You may also need to add this inside the previous css media query:

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

    If you have time, you can also try @Guenni007’s suggestion above.

    Best regards,
    Ismael

    #1483762

    Huheeey!

    With the last code you gave me it finally worked at my end, Ismael. Thanks for all your help and patient.

    And thanks to Guenni007’s suggestion.

    #1483802

    Hi,

    Good to know! Glad this has been resolved. Let us know if you have more questions.

    Best regards,
    Ismael

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Transparent header on mobile, that goes solid on scroll’ is closed to new replies.