[Resolved] Two sticky menus?

[Vera]

I have two horizontal menus: secondary menu is at the top of my page followed by a header image and then my primary navigation below that.

I set my primary menu to stick to the top of the page when its normal position scrolls out of view. I would like the same to occur with the secondary menu. That is, I would like them to stack at the top of all my page with no header image between them.

Note that I have set a different header image for my home badge than the rest of my site but they all have the same arrangement for the two menus.

Can you help me with this?

[Tom]

Hi there,

We may be able to do this, but it depends on the setup. Any chance you can link us to your site?

[Vera]

It’s still in progress but here’s the home page:

http://www.marshallart.com/HOME/

[David]

Hi there,

try this CSS:

#secondary-navigation {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
.sticky-enabled .main-navigation.is_stuck {
    top: 40px !important;
}

[Vera]

Perfect! THANK YOU!!!

I don’t know why I didn’t think of CSS. I must’ve been stuck in the mindset that it was a GP feature, like for primary navigation.

Thanks again!

[David]

Glad to be of help

[Author]

Posts