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

Thanks Fernando,
I'm not seeing a above_header ?
Do I add that in custon ?
Dave

How did you add the Top bar exactly?

Oh, its an element, that is a block, with hook with before header. Priority 10, and entire site
Dave

Can you give it a priority of 1 instead?

OK, thanks its moving forward.
Now the background color is tranparent.
I've tried to set the background color, but it is not sticking.

Is it possible to have it transparenet before sticky, but fixed color when you scroll down and the top-bar and header come in ?

TIA, Dave

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

Thanks,
I took out the left: 50% and the tranform:translate, that seemed to mess up the top bar position of the buttons.
So the top bar is good!
Just need the sticky menu to have a fixed colour - which I think I have working.
I added the top entry below, and the rest is a mix of yours modified and mine!
Thanks for your patience !

.sticky-enabled .main-navigation.is_stuck {
	  background-color: #eceff1;
}

.gb-container.gb-container-26cec0c6.top-bar {
    position: fixed;
    background:transparent;
    z-index: 100;
}

.header-wrap {
    top: 50.6px;
}

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

.gb-container.gb-container-26cec0c6.top-bar {
  position: sticky;
  top: 0;
  background-color: #eceff1;
}

Dave

Hi Dave,

is it all working as you need it to ?

Hi David,
It's pretty close - the sticky functionality is all OK.
I would idealy like the top-bar to be transparent, before being sticky, then it switches to a solid color.
TIA, Dave
ps late here, so may not be able to reply until the morning

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...