[Resolved] Relocate Sticky Secondary Nav downward when Mobile Header is open

[Theron]

Hi again!

I’ve got my Secondary Nav sticking below the Primary Nav. I’ve set the Secondary Nav Top so it stays below the Primary Nav. I used media queries for the different screen sizes.

Now I see that when the Top Primary Nav has turned into a Hamburger AND IS OPEN, the Secondary Nav will first appear below the open top menu. However, when I scroll down, the Secondary Nav does not stay stuck below the open Top Nav. It rolls up and obscures the open menu and sometimes the header.

So I think I need to target the Primary Nav when it’s turned into a Hamburger and is OPEN. If that’s a good approach, how do I target the Primary Nav when it’s an open hamburger?

I tried this selector: .has-inline-mobile-toggle + .secondary-navigation
That’s what I hoped was the toggled menu, immediately followed by the Secondary Nav. It didn’t work. (CSS below.)

/* Make Secondary Nav Sticky*/
/* Tablet Size Screen PRIMARY MENU OPEN */

@media screen and (max-device-width:986px), screen and (max-width:986px) {
.has-inline-mobile-toggle + .secondary-navigation {
margin: 0;
border: 0px solid #ccc;
top: 310px;
/* FIX TOP FOR Chrome, Safari, and also the Edge Browser and Firefox */
@media and (-webkit-min-device-pixel-ratio:0) {
.secondary-navigation { top:310; }
}
position: -webkit-sticky;
position: sticky;
top: 310px;
}
}

So if I’m right that I need to create media queries that target the Primary Nav when it’s a Hamburger and is also Open, how do I do that?

URL is in Private Area.

Thank you very much for any help.

[Ying]

Hi Theron,

Try this CSS:

.mobile-menu-open nav#secondary-navigation {
    top: 311px;
}

[Theron]

Thanks, I think I’m making progress. I think the Secondary Nav shares the same class when it’s open (.mobile-menu-open). Is there another selector for the Secondary Nav when open, so I can control where it lands when open? (Or should I try to target it with CSS, like nav#secondary-navigation.mobile-menu-open?)

Is there a list of all such selectors? I don’t see one in the docs. And I don’t see .mobile-menu-open using the inspector.

I’ll have to use a simpler menu for now and return to this. Any help on the above is appreciated.

[Ying]

Hum… I don’t see a way to achieve this with CSS only Unfortuanly.

I think it will require some custom JavaScript which is out of the scope of the support forum.

[Theron]

Thanks! I think a javascript Mega-Menu may be the way to go.

[Ying]

Yes, I agree.

[Author]

Posts