Relocate Sticky Secondary Nav downward when Mobile Header is open

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.