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

[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

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

This should do the trick:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[José]

Wonderful, thank you David for your time.

Regards

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[José]

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

Thanks David

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts