Suggestions on best way configure a sticky header/top-bar

Hi,

If you're trying to achieve the same color change effect, you'll have to write a custom script for that.

But if you want to simply make the topbar sticky along with the sticky nav, you can do it with just CSS.

Example:

/* Make topbar sticky */
.top-bar{
	position:fixed;
	top:0;
	z-index:99;
	width:100%;
}
/* Make sticky nav adjust to the topbar */
#sticky-navigation{
	top: [top bar's height in px on desktop] !important;
}
@media(max-width:768px){
#sticky-navigation{
	top: [top bar's height in px on mobile] !important;
}
}

Just make sure to set the #sticky-navigation's top: property to the height of the top bar for both desktop and mobile.

Thanks Elvin, I shall try that out...
I have since started work on it and I'm now using an element for the top-bar hooking into wp_head
I'll see if the stick CSS works for that...
Regards, Dave

So I made some progress...
I have the top-bar (now an element) sticky with this CSS:

.gb-container-2ca8413c {
	position:fixed;
	top:0;
	z-index:99;
	width:100%;
	background-color: #34475A;
}

And I pushed the area below it down 48 pixels (the height of the top-bar) with this CSS:

#masthead {
margin-top: 48px;	
}

So checking if that is all OK
What is left now is when you scroll down the sticky menu is on top of the top-bar.
I can't work out how to adjust that so it is not overlapping ?
Thanks, Dave

Try adding this in:

nav#sticky-navigation {
    top: 48px !important;
}

What this does is it pushes your #sticky-navigation down to the height of your topbar so they don't overlap.

Thanks so much Elvin, that is now working perfectly...
Regards, Dave

Thanks so much Elvin, that is now working perfectly…
Regards, Dave

No problem. Glad to be of any help. :)

Cheers Elvin, Out of interest, what time zone are you in ?
You seem to be around when the Canada guys are sleeping :)

Cheers Elvin, Out of interest, what time zone are you in ?
You seem to be around when the Canada guys are sleeping 🙂

GMT+8 (Asia). And yes that's right I cover the evening hours for the team but we overlap.

It's so all the hours of the day are covered meaning there's always someone around to help out(or atleast we try to). :D

:) Same as me, I'm in Perth, Western Australia!
Super handy for me :)