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

[studiomaterial]

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. 

[BharatThemes]

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 🙂
— Bharat Theme

[studiomaterial]

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! 

[BharatThemes · Accepted solution]

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 🙂
— Bharat Theme

[studiomaterial]

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

[BharatThemes]

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 🙂
— Bharat Theme

[studiomaterial]

thank you! 

[BharatThemes]

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