Announcement Bar Sticky Mojave Theme

[Adam_Matthews]

Trying to get the announcement bar sticky on Mojave theme. Ive tried solutions for Dawn theme but they aren’t working.

Website: www.matthewsjewellers.com

[BSS-TekLabs]

Hi @Adam_Matthews ,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

.announcement-bar {
    background: #fff !important;
    position: fixed !important;
    top: 0 !important;
}

.header-wrapper {
    position: fixed;
    top: 48px;
    width: 100%;
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[oscprofessional]

Hello @Adam_Matthews
Please follow steps

• Access Your Theme’s Code:

  • Go to your Shopify admin panel.
  • Navigate to Online Store > Themes.
  • Click Actions > Edit code on the Mojave theme.

• Identify the Announcement Bar:

  • Look for the file where the announcement bar is defined. This is usually found in the header. liquid or announcement-bar. liquid.

• Add CSS for Sticky Position:

  • Locate the CSS file that controls the styling of the announcement bar. This is typically found in the theme. scss.liquid, theme.css.liquid, or similar.

• Modify the CSS:

  • Add the following CSS to make the announcement bar sticky:

.announcement-bar {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 0;
  z-index: 1000; /* Ensures it stays above other content */
  width: 100%;
  background-color: #fff; /* Adjust as needed */
  /* Add any additional styling you need */
}

Ensure you replace the .announcement-bar with the actual class or ID used in your theme if it’s different.

• Adjust JavaScript (if needed):

  • Some themes might use JavaScript to handle the announcement bar’s behavior. Check for any JavaScript files or snippets that might need adjustments to ensure compatibility with the sticky positioning.

[GTLOfficial]

Hello @Adam_Matthews

Go to online store ---------> themes --------------> actions ------> edit code------->base.css
add this code at the very end of the file.

sticky-header {
  position: fixed !important;
  width: 100% !important;
  top: 40px !important;
}

.announcement-bar {
  position: fixed;
  background: #fff !important;
}

result

If this was helpful, hit the like button and mark the job as completed.
Thanks

[theycallmemakka]

Hi @Adam_Matthews

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[Dan-From-Ryviu]

Hi @Adam_Matthews

Please add this code to theme.liquid file, after in Online Store > Themes > Edit code