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

[David]

Hi All,
I have a new site that I am about to start

I need a top bar added.
But I also need a sticky menu, but the top bar needs to be stick too!

I would like to start with Ethos or Stream ?

Here is an example site the customer has provided:
https://www.themarketingrepubliq.com.au/

What would be the best approach – could I do this using Elements, or the standard way to configure the top bar ?

TIA, Dave

[Elvin]

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.

[David]

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

[David]

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

[Elvin]

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.

[David]

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

[Elvin]

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

No problem. Glad to be of any help. 🙂

[David]

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

[Elvin]

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

[David]

🙂 Same as me, I’m in Perth, Western Australia!
Super handy for me 🙂

[Author]

Posts