How to make announcement bar sticky, while hiding logo image in header? [Ride Theme]

[Seedfolk]

Our store is not live, so I cannot share. We’re on the Ride theme.

I’ve worked out how to hide the logo in the header on scroll:

body:has(.scrolled-past-header) .header__heading-logo-wrapper img{
  display:none
}

Just two issues so far.

1. There is now a gap where the logo was, and the Social Media buttons, Profile, and Search are on the line where the logo was because they’re part of the same element, while the nav bar underneath the logo remains in its element, a line below that. I’d prefer to move the nav bar up to fill that void.

2. I would like to sticky the announcement bar. I’ve tried multiple approaches, but each one will instead sticky the header, and the announcement bar still goes away. The announcement bar is above the header. I’ve tried moving it below the header, but it still happens.

---

[goldi07]

Hello @Seedfolk

For your Ride theme, let’s address both issues step by step:

1. Move Navigation Up to Fill the Logo Gap
   Since hiding the logo removes it from the flow but leaves the other elements in place, you need to move the navigation up. Try this CSS:

body:has(.scrolled-past-header) .header__inline-menu {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

This will push the navigation up to replace the logo’s space when scrolling.

2. Make the Announcement Bar Sticky
   The problem is likely due to position: sticky; applying only within the parent’s bounds. Instead, you should use position: fixed; to keep it always visible. Add this CSS:

.announcement-bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

Then, adjust the header’s positioning to avoid overlap:

.header {
    margin-top: var(--announcement-bar-height); /* Adjust based on your theme */
}

If your announcement bar disappears on scroll, check if JavaScript is modifying its class and override that behavior.

Thank you

[goldi07]

Hello @Seedfolk

For your Ride theme, let’s address both issues step by step:

1. Move Navigation Up to Fill the Logo Gap
   Since hiding the logo removes it from the flow but leaves the other elements in place, you need to move the navigation up. Try this CSS:

body:has(.scrolled-past-header) .header__inline-menu {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

This will push the navigation up to replace the logo’s space when scrolling.

2. Make the Announcement Bar Sticky
   The problem is likely due to position: sticky; applying only within the parent’s bounds. Instead, you should use position: fixed; to keep it always visible. Add this CSS:

.announcement-bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

Then, adjust the header’s positioning to avoid overlap:

.header {
    margin-top: var(--announcement-bar-height); /* Adjust based on your theme */
}

If your announcement bar disappears on scroll, check if JavaScript is modifying its class and override that behavior.

Thank you

[devcoders]

Hello @Seedfolk
Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

[Seedfolk]

Thank you. For filling the gap, that worked in conjunction with my code that I have in my theme.liquid file, which I noted in my original post. Thanks!

Unfortunately, when addressing point 2, the CSS gets rid of the content within the announcement bar somehow. Perhaps because I’m unsure what to put into the second snippet you provided.

[Seedfolk]

seedfolk-coffee.myshopify.com

[Bundler-Manuel]

Hi there @Seedfolk You should try out the following steps

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file → add this following code at the bottom of page

.announcement-bar.sticky,
.navigation-menu.sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}

.header:not(.sticky) {
  display: none;
}

Let me know if this works for you!

[Seedfolk]

Unfortunately, no, that did not work. It hides the logo entirely, and the announcement bar is not stickied.