[Support request] Sticky Top Bar

Hi David,

Hook your 2 buttons to above_header instead. Then add this CSS:

nav#sticky-navigation.is_stuck {
    top:  45.5px !important;
}

.gb-container.gb-container-26cec0c6.top-bar {
    position: sticky;
    top: 0;
}

How did you add the Top bar exactly?

Can you give it a priority of 1 instead?

Can you try adding this CSS?:

.gb-container.gb-container-26cec0c6.top-bar {
    position: fixed;
    left: 50%;
    transform:translateX(-50%);
    background:transparent;
    z-index: 100;
}

.header-wrap {
    top: 50.6px;
}

Hi Dave,

is it all working as you need it to ?

It would need some Javascript:

<script>
// Get the topBar 
const topBar = document.querySelector('.top-bar');

// create a debounce for performance
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  }
}

// add is_stuck clas to topBar if the window is not top
function addClassIfNotTop() {
  if (window.scrollY > 0) {
    topBar.classList.add('is_stuck');
  } else {
    topBar.classList.remove('is_stuck');
  }
}
window.addEventListener('scroll', debounce(addClassIfNotTop, 100));

// Add a scroll event listener to the window using the debounced function
window.addEventListener('scroll', debounce(addClassIfNotTop, 100));
</script>

Hook that into the wp_footer of the pages its required.

On scroll it will add the is_stuck class to your top-bar block element.

So you can use some CSS to make the background transparent when its not stuck:

.top-bar:not(.is_stuck) {
    background: transparent !important;
}

Might need some negative margins to bring the content up behind the top bar…