Transparent header on mobile, that goes solid on scroll - Support

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
April 29, 2025 at 3:55 pm #1483342

Scanmark
Participant

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

April 30, 2025 at 6:56 am #1483374
Ismael
Moderator
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
April 30, 2025 at 11:43 am #1483408

Scanmark
Participant

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?

May 1, 2025 at 6:29 am #1483428

Ismael
Moderator

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

May 2, 2025 at 8:21 am #1483485

Scanmark
Participant

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!

May 5, 2025 at 6:17 am #1483590

Ismael
Moderator

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

May 5, 2025 at 8:23 am #1483594

Scanmark
Participant

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

May 5, 2025 at 9:25 am #1483602

Ismael
Moderator

Hi,

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

Best regards,
Ismael

May 5, 2025 at 9:46 am #1483606

Scanmark
Participant

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.

May 6, 2025 at 6:22 am #1483665
Ismael
Moderator
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
May 6, 2025 at 9:14 am #1483674

Scanmark
Participant

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.

May 6, 2025 at 10:27 am #1483675
Guenni007
Participant
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.
May 7, 2025 at 6:11 am #1483731
Ismael
Moderator
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
May 7, 2025 at 10:58 am #1483762

Scanmark
Participant

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.

May 8, 2025 at 6:07 am #1483802

Ismael
Moderator

Hi,

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

Best regards,
Ismael
Author

Posts

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.