Sticky announcement bar - Palo Alto Theme

[MollieHammond]

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!

[Gideon11 · Accepted solution]

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

 

2. 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;
}

3. Save and close theme.css

4. 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");
  }
}

4. Save and close the file.

5. Refresh to test the feature.

if this worked for you, please mark as solution.

[MollieHammond]

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