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

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

Home Forums Support Relocate Sticky Secondary Nav downward when Mobile Header is open

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2141385
    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.

    #2141493
    Ying
    Staff
    Customer Support

    Hi Theron,

    Try this CSS:

    .mobile-menu-open nav#secondary-navigation {
        top: 311px;
    }
    #2142826
    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.

    #2142907
    Ying
    Staff
    Customer Support

    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.

    #2143325
    Theron

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

    #2143678
    Ying
    Staff
    Customer Support

    Yes, I agree.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.