
-
AuthorPosts
-
April 29, 2025 at 3:55 pm #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
RolandApril 30, 2025 at 6:56 am #1483374Hey 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,
IsmaelApril 30, 2025 at 11:43 am #1483408Hi 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 #1483428Hi,
It seems to be working correctly when we checked. Please try to purge the cache or remove the browser history.
Best regards,
IsmaelMay 2, 2025 at 8:21 am #1483485Hi
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 #1483590Hi,
The header’s background color is initially transparent and changes to black on scroll. Please check the screenshot below:
Best regards,
IsmaelMay 5, 2025 at 8:23 am #1483594Hi
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.
Best regards
RolandMay 5, 2025 at 9:25 am #1483602Hi,
Have you tried purging the cache or completely removing the browser history? You can also switch to incognito mode.
Best regards,
IsmaelMay 5, 2025 at 9:46 am #1483606Yeah…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 #1483665Hi,
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,
IsmaelMay 6, 2025 at 9:14 am #1483674Hi,
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 #1483675see 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 #1483731Hi,
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,
IsmaelMay 7, 2025 at 10:58 am #1483762Huheeey!
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 -
AuthorPosts
- The topic ‘Transparent header on mobile, that goes solid on scroll’ is closed to new replies.