Re: Announcement Bar Sticky Mojave Theme

Adam_Matthews · ‎08-03-2024

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

Dan-From-Ryviu · ‎08-03-2024

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

<style>
#shopify-section-announcement-bar {
    position: sticky;
    top: 0px;
    background: #fff;
    z-index: 9;
    padding-bottom: 0px !important;
}
.shopify-section-group-header-group { z-index: 9 }
.shopify-section-header-sticky {
    top: 48px !important;
}
@media (max-width: 749px) {
body .shopify-section-header-sticky {
    top: 31px !important;
}
}
</style>

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

BSS-TekLabs · ‎08-03-2024

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!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

oscprofessional · ‎08-03-2024

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 · ‎08-03-2024

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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

theycallmemakka · ‎08-03-2024

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 </body>

<style>
:root{
    --a_height: 100px;
}
body:has(.shopify-section-header-sticky) div#shopify-section-announcement-bar {
    position: fixed;
    top: 0px;
    z-index: 4001;
    background: rgb(255, 255, 255);
    padding-bottom: 0px!important;
}
.shopify-section-header-sticky {
    top: var(--a_height);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
    const announcementBar = document.querySelector('.announcement-bar');
    const announcementBarHeight = announcementBar.offsetHeight;
    document.documentElement.style.setProperty('--a_height', `${announcementBarHeight}px`);
});
</script>

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

Support Me: Buy me a Coffee

For quick response - Message Me

Ping me at: theycallmemakka@gmail.com

Dan-From-Ryviu · ‎08-03-2024

Hi @Adam_Matthews

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

<style>
#shopify-section-announcement-bar {
    position: sticky;
    top: 0px;
    background: #fff;
    z-index: 9;
    padding-bottom: 0px !important;
}
.shopify-section-group-header-group { z-index: 9 }
.shopify-section-header-sticky {
    top: 48px !important;
}
@media (max-width: 749px) {
body .shopify-section-header-sticky {
    top: 31px !important;
}
}
</style>

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Re: Announcement Bar Sticky Mojave Theme

Announcement Bar Sticky Mojave Theme

Community Blog Articles