[Support request] Sticky Top Bar

[David]

Hi Everyone,

I actually asked this question a while back, and got it working, but that site changed, so I can’t reference back to it now to look at the CSS used.
And I suspect something has changed over time anyway.

The link below is where I am testing a copy of a live site.
I need the new top bar I created (wtih the two buttons) to be sticky when you scroll down, so both the top bar and sticky header/menu are on top of each other.

The height of the top bar is 46 px

I found 6 or 7 simialr articles but none seemed to work for me…
TIA, Dave

[Fernando]

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

[David]

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

[Fernando]

How did you add the Top bar exactly?

[David]

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

[Fernando]

Can you give it a priority of 1 instead?

[David]

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

[Fernando]

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

[David]

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

[David]

Hi Dave,

is it all working as you need it to ?

[David]

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

[David]

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…

[Author]

Posts