We used the below code to make our logo icon disappear on scroll on desktop and only the navigation menu remains. However, on mobile now when you scroll to logo icon disappears. I want it to remain sticky on mobile
x-header.header.color-scheme.color-scheme--scheme-2.is-solid { display: flex !important; justify-content: space-between !important; } x-header.header.color-scheme.color-scheme--scheme-2.is-solid h1.header__logo { display: none !important; }Topic summary
A user implemented CSS code to hide their store logo on scroll while keeping the navigation menu visible on desktop. However, this caused an unintended issue on mobile devices where the logo also disappeared when scrolling.
Problem:
- Custom CSS targeting the header with class
is-solidhides the logo (h1.header__logo) on scroll - This behavior works as intended on desktop but also affects mobile views
- User wants the logo to remain sticky/visible on mobile devices only
Resolution:
The issue was resolved (user confirmed “This worked thanks!”), though the specific solution wasn’t shared in the thread. The fix likely involved adding a media query to restrict the logo-hiding CSS to desktop screen sizes only, allowing the logo to remain visible on mobile.
This worked thanks!