[Resolved] Sticky Menu is a different menu

[Gerik]

My site uses two menus (primary and secondary) when you scroll down the second one goes away. To remedy this I would like to pick a different menu for the sticky. Especially since the logo is an icon size I can fit more.

[Tom]

Hi there,

By default, the primary menu is the one that can be sticky.

Both the primary and secondary menus have identical options (colors, typography, layout etc..), so you could just switch the theme locations (Appearance > Menus) and change the settings for each so the secondary looks like the primary and the primary looks like the secondary?

Let me know if that makes sense or not 🙂

[Gerik]

I don’t think so…

this is my layout

——————
SECOND MENU
LOGO FIRST MENU
——————

when I scroll down and I have sticky on. It becomes…

——————-
SM.LOGO FIRST MENU (second menu disappears)
——————-

I would like it to be…
——————-
SM.LOGO THIRD MENU (a combination of first & second menu which I create)
——————-

!!!!!!!OR!!!!!

How can I make both menu sticky?

[Tom]

Combining them isn’t really an option unless you get a little advanced and give specific menu items classes and show/hide them based on the sticky/non-sticky classes.

You might be able to make both menus sticky like this:

.secondary-navigation {
    position: fixed;
    width: 100%;
    top: 0;
}

.main-navigation.is_stuck,
.main-navigation.navigation-clone {
    top: 40px !important; /* height of secondary navigation */
}

[Gerik]

worked, thanks

[Author]

Posts