[Resolved] how can i make the secondary menu sticky?

[Kim]

thanks!

[David]

Hi there,

any chance i can see the Site? The CSS required will depend on the layout of the navigation and the height of the different elements.

[Kim]

Yes, of course. It’s here:

https://backtomobility.ca/

Thanks!

[David]

Try this CSS:

.secondary-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 83px;
}

@media(min-width: 1301px) {
    .secondary-navigation {
        top: 116px;
    }
}

[Kim]

hmmm

That didn’t work. I got to errors (exclamation marks).

One said: Expected (static | relative | absolute | fixed) but found ‘webkit-sticky’

The second said: Expected (static | relative | absolute | fixed) but found ‘sticky’

Does that help?

[David]

I assume this is in Customizer > Additional CSS. You can safely ignore them by clicking the checkbox provided at the top of the CSS field. WP parses only older CSS2 properties.

[Kim]

Yes, this is Customizer > Additional CSS. But I can’t see a chechbox anywhere…

[David]

You should be able to just publish the changes then.
If you have any other CSS in Additional CSS paste the code i gave you at the very top of the code stack.

[Christian]

I’m researching a similar question. On looking at the code I saw a typo in the code:

.secondary-navigation {
position: -webkit-sticky;
position: sticky;
top: 83px;
}

@media(min-width: 1301px) {
.secondary-navigtion {
top: 116px;
}
}

In the second part there is an “a” missing: navigation:

Maybe it helps to change the code to:

.secondary-navigation {
position: -webkit-sticky;
position: sticky;
top: 83px;
}

@media(min-width: 1301px) {
.secondary-navigation {
top: 116px;
}
}

Best, Chris

[David]

Good spot Chris – i think i am need of some spectacles . code updated above 🙂

[Kim]

Thank you both. Chris, that worked perfectly.

[Christian]

Kim, happy to hear that it works now! Have a great summer…

[Author]

Posts