Failing at inserting an element at inside_mobile_menu hook

Hi there,

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

If so, try using theinside_slideout_navigation hook.

Hi Ying,
no, not the slideout version.

thanks.

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

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

Hi there,

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

https://www.screencast.com/t/yWBxHzmpe

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.

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

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 ?

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

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

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

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 ....

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

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

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

Glad to hear that!