Fabric theme disable hide logo in scrolled style / keep logo in header when not scrolling

Store Design
, ,

Topic summary

A Shopify store owner using the Fabric theme encountered an issue where the logo disappears when users stop scrolling, causing the navigation menu to shift position unexpectedly.

Initial Problem:

  • Logo hides on scroll stop
  • Navigation menu shifts into the logo’s previous space
  • Creates a disorienting user experience

Solution Process:
A community helper provided CSS code targeting .header__logo classes, but this didn’t resolve the issue. After reviewing the live store URL, they identified the theme uses a data-hidden-on-home-page attribute.

Final Working Solution:
Adding this CSS to the base.css file keeps the logo visible on desktop only:

@media screen and (min-width: 750px) {
  .header-logo[data-hidden-on-home-page] {
    display: block !important;
  }
}

The media query prevents layout issues on mobile devices while fixing the desktop header behavior.

Status: Resolved successfully.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

hello I would like to stop the logo from hiding when not scrolling in the fabric theme.

Currently the logo disappears whenever the user stops scrolling. This is disorienting as the entire nav menu shifts position moving to the space previously occupied by the logo as well as shifting up a few pixels for some reason.

For clarification basically I wold like the logo to always show in the header.

Any help would be appreciated.

Thank you.

2

Hi! Please share your store URL with the password (if it’s protected), so I can take a closer look at how the Fabric theme is behaving on your site.

In general, the Fabric theme hides the logo on scroll stop using JS and CSS transitions. To keep the logo always visible in the header, you can try this CSS:

.header__logo {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.header--scrolled .header__logo {
  opacity: 1 !important;
  transform: none !important;
}

Add it to the bottom of your base.css file.

This will stop the logo from disappearing and also prevent the nav from shifting.

Let me know once shared — happy to help further if needed :slightly_smiling_face:
— Bharat Theme

3

Hi Bharat, Thank you. The code didn’t work for this theme, Here is the temp theme link - https://gbp1nk-wj.myshopify.com/

Thanks for your help on this!

4

Thanks for sharing the link!

To keep the logo always visible in the Fabric theme, especially when it uses the data-hidden-on-home-page attribute, try this:

.header-logo[data-hidden-on-home-page] {
  display: block !important;
}

Add this at the end of your base.css file.

This should stop the logo from hiding and fix the header layout shift.

I’ve worked with similar theme issues before — happy to help further through the thread if needed :slightly_smiling_face:
— Bharat Theme

1 Like
5

Hi Bharat, thank you that worked for desktop display, the only issue now is that on mobile display the logo is placed awkwardly.

6

To keep the logo always visible (only on desktop), wrap the CSS in a media query like this:

@media screen and (min-width: 750px) {
 .header-logo[data-hidden-on-home-page] {
  display: block !important;
 }
}

This will apply the fix only on desktop and avoid layout issues on mobile.

Let me know if you need anything else :slightly_smiling_face:
— Bharat Theme

1 Like
7

thank you!

8

You’re welcome! Glad it helped :blush:
Feel free to post anytime if you need help with anything else.
— Bharat Theme