[Resolved] Sticky Nav + Speed Contact Bar

[Steve]

Hi guys,

Great theme, I’m loving it so far. I’m using a child theme and Elementor page builder.

Could you please assist me with a small problem? I have installed the Speed Contact Bar plugin which sticks to the top of the page. I have also set my main nav to be above the header and sticky. This all works well when the page loads, the nav appears directly under the contact bar. But when you scroll down, the nav slides up to the top of the page and disappears behind the contact bar.

I’m sure a padding or margin setting in the child styles.css file would address this so that the nav stops underneath the contact bar, but can you suggest what I should be trying please.

Many thanks.
Steve

[Tom]

Hi Steve,

You’ll need to find the height of your contact bar, and then tell the sticky navigation to sit below it:

.main-navigation.navigation-clone,
.main-navigation.is_stuck {
    top: 60px; /* height of contact bar
}

Hope this helps 🙂

[Steve]

Hi Tom,

Really sorry for the delay in my reply but the weekend got in the way! I tried the code you gave me but it didn’t work, so I changed ‘top:’ to ‘margin-top:’ and it worked just fine.

Many thanks for your help.

Steve

[Tom]

Glad you got it working 🙂

[Author]

Posts