Sticky announcement bar - Palo Alto Theme

Store Design
,
1

Hi There,

Hope everyone is well!

I was wondering if anyone knows how to make a sticky announcement bar?

Theme: Palo Alto

Website URL: https://www.theluxelab.com.au/

Any help would be greatly appreciated.

Thank you in advance!

2

Hi @MollieHammond ,

  1. Click the three dots, then edit code as shown;

Screenshot 2024-07-22 225341.png
Screenshot 2024-07-22 225341.png952×264 36.5 KB

  1. Go to assets and open theme.css then paste the following code at the bottom;
.announcement-bar-sticky {
    position: sticky !important;
    top: 60px;
    z-index: 135;
}

  1. Save and close theme.css

  2. Open theme.js and paste the following at the bottom;

// When the user scrolls the page, execute stickyFunction
window.onscroll = function() {stickyFunction()};

// Get the navbar
const navbar = document.getElementById("NavStandard");

//Get the announcement bar
const announcementBar = document.querySelector(".announcement-bar-static");

// Get the offset position of the navbar
const sticky = navbar.offsetTop;

// Add the sticky class to the announcement bar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function stickyFunction() {
  if (window.pageYOffset >= sticky) {
    announcementBar.classList.add("announcement-bar-sticky")
  } else {
    announcementBar.classList.remove("announcement-bar-sticky");
  }
}

  1. Save and close the file.

  2. Refresh to test the feature.

if this worked for you, please mark as solution.

3

That worked perfectly! You’re an absolute legend, thanks so much!