[Resolved] Change the order of the secondary menu in the mobile view.

Home Forums Support [Resolved] Change the order of the secondary menu in the mobile view.

Home Forums Support Change the order of the secondary menu in the mobile view.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #872156
    José

    Hi, I want to change the order of the secondary menu in the mobile view (attached image)
    I tried the following CSS:

    #mobile-header inside-navigation grid-container grid-parent {
    order: 6;
    }

    but it did not work …

    the search bar is inserted through a hook in inside_mobile_header and the secondary menu (menu toggle) is integrated with max megamenu

    Thanks for the help

    user name
    1vendedor@cechile.com
    123

    #872400
    David
    Staff
    Customer Support

    Hi there,

    quite tricky to do that, you can’t simply re-order the elements like that. The order property only applies if the parent container is a flexbox or CSS grid.

    We could try creating a wrap around the entire site header and then apply a grid for re-ordering but not sure how it will work. To add the wrap you will need to create 2 Hook Elements:

    https://docs.generatepress.com/article/hooks-element-overview/

    Hook 1
    Content: <div class="header-wrap"><!-- open wrap -->
    `
    Note: The editor will automatically add a closing </div> – delete that.
    Hook: before_header
    Priority: 0

    <strong>Hook 2</strong>
    Content: <!-- close wrap --></div>
    Hook: after_header
    Priority: 10 default

    Both hooks should use the Display Rule: Entire Site.

    Once you have set that up and its not breaking anything we can look at applying some CSS

    #872503
    José

    Hi David, thanks for your attention …
    I added both hook 1, hook 2.

    When I checked I saw that the sticky navigation was blocked and it was working with intermittence. so I better disabled the sticky navigation, but in the mobile view it was working intermittently … I do not know if that can be easily corrected.

    the sticky navigation leave it activated so you can see how it works

    What do you think you can apply css?

    Regards

    #872680
    David
    Staff
    Customer Support

    In edited the HTML for Hook 1 – as i forgot to add the code wrapper so its broken. Can you change that.

    Hmmm the problem is the sticky nav won’t work with this method……. the only other way i can think of is to use Javascript to reposition them – but this is prone to ‘jumpiness’…. let me know.

    #872741
    José

    ok David, I added the new on hook 1

    For me it is not important to use fixed navigation, if javascript can generate alterations it is better not to use fixed navigation.
    Now we just need to add CSS and I disable fixed navigation?.

    Thanks

    #872746
    David
    Staff
    Customer Support

    This should do the trick:

    @media (max-width: 768px) {
        .header-wrap {
            display: flex;
            flex-direction: column-reverse;
        }
    }
    #872770
    José

    David, I see that it works perfectly, the order is fine, I also checked the desktop, the tablet and the mobile mode, and the fixed navigation also works

    Can I leave the sticky navigation activated?

    #872777
    David
    Staff
    Customer Support

    Looks like you can leave the sticky nav activated 🙂 Wasn’t sure if this method would interfere. But looks good to me.

    #872856
    José

    Wonderful, thank you David for your time.

    Regards

    #872865
    David
    Staff
    Customer Support

    Glad to be of help

    #873716
    José

    Hi David, you know, I forgot that I have to exclude the secondary menu from the shopping cart page and finish the purchase. I went to the element to try to exclude it in the hook of the wrappers, but it does not work like that … would it work to hide the menu with CSS in the specific pages?

    Thank you

    #873756
    David
    Staff
    Customer Support

    You should be able to use the Layout Element to disable the Secondary Nav on those pages:

    https://docs.generatepress.com/article/layout-element-overview/

    Let me know

    #873806
    José

    It works perfectly, I really had not paid attention to the deactivation of elements. Every day I learn something …

    Thanks David

    #873828
    David
    Staff
    Customer Support

    Glad to be of help

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