[Support request] Failing at inserting an element at inside_mobile_menu hook

[Elvis]

Hello,

I have tried searching the forum, but couldnt find what I need.

Inside the mobile menu panel, at the end I would like to have search and social icons. Like this:

And I am trying to do that using this

But nothing happens.

If I choose any other mobile menu related hook, it appears, only these are not where I want it. Only not in place I want. 😀

Please help.

To understand recursion, you first have to understand recursion.

[Ying]

Hi there,

Are you using the off-canvas menu for the mobile?

If so, try using theinside_slideout_navigation hook.

[Elvis]

Hi Ying,
no, not the slideout version.

thanks.

To understand recursion, you first have to understand recursion.

[Fernando]

Hi Elvis,

For reference, can you share the link to the site in question?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Elvis]

Hi @Fernando,
check out the site linked in the private box.
Thanks

To understand recursion, you first have to understand recursion.

[David]

Hi there,

if you use the Hook: after_primary_menu it will output the HTML here:

you will need to use some CSS to ensure its display: block on mobile and display: none for desktop and its flex order is high enough to move it down to its logical position.

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

[Elvis]

Thanks @David,

that kinda works. Any Ideas why inside_mobile_menu does not work? The issue is, accessibility wise, this kind of layout that does not reflect the actual structure of the HTML document tends to produce problems when it comes to screen readers and keyboard navigation in my experience.

What I am trying to say I would like to have the buttons in the proper place, just after the mobile menu UL. Its more elegant CSS wise, html wise.

Thanks,
Elvis

To understand recursion, you first have to understand recursion.

[David]

The inside_mobile_menu hook is really badly named, as its position is actually inside the navigation element.

There is no Hook inside the UL element – is that where you are wanting to add it ?

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

[Elvis]

Hi @David,
inside #mobile-menu element, right after the UL element.

When I place it there in my dev tools, everything is dandy. 😀

To understand recursion, you first have to understand recursion.

[Elvis]

Also, It would be ok If it was placed in <nav> element, but its not there?!

To understand recursion, you first have to understand recursion.

[David]

Unfortunately we can’t hook inside the #mobile-menu as thats the menu wrapper.
The method i proposed here does place it in the nav > inside-navigation element though ….

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

[Elvis]

True. inside_mobile_header seems to do that too. 🙂

Pitty it cannot be in #mobile-menu. Will work withint the inside-navigation though.

I just have trouble sticking it to the bottom, without position.

Thanks, I’ll figure it out from here.

Best,
E

To understand recursion, you first have to understand recursion.

[David]

If you can hook it in there, and i can see it, i can take a look at fixing it below the UL. Let me know

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

[Elvis]

Thanks, its done.
Will push to staging later.

.social-icons { order: 5; min-height: calc(100vh -90px); }
.inside-navigation { align-content: flex-start;}

Done,
Thanks a lot

To understand recursion, you first have to understand recursion.

[David]

Glad to hear that!

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

[Author]

Posts