Thanks Elliot! What about preventing the page from scrolling to top when mobile menu is opened ?

Cheers,
woeph

Thanks Yigit, I managed to get what I wanted. However, because I have the shrinking/transparent header enabled on my theme, when I scroll down on mobile the header will fade out and quickly back in. I believe this is the transition between normal header to shrinked header but I can’t manage to hide the transition targeting mobile viewport only. Could you please assist?

Cheers,
woeph

Hey Ismael,

Thanks for the code, it helped to an extent. I’d like to enable this to work with the shrinked header and it’s also messed up on mobile. For the record, I’m using an SVG logo and the full code is

/* Adjustments for SVG logo */
.logo img {
width: 100%;
}

@media only screen and (max-width: 480px) {
.responsive .logo a, .responsive .logo img { max-width: 80%; }}

/* Logo + Text */
#top .av_header_transparency.av_alternate_logo_active .logo a > img {opacity: 1; filter: alpha(opacity=100); }
strong.logo, .logo a { overflow: visible; }
span.subtext { position: absolute; left: 230px; top: 0; color: white; width: 100%; }

Hi Yigit,

Thanks, that’s exactly what I needed but I still get some padding on mobile and I’m not sure what I need to add in css. Can you please have a look?

Thanks.