Archived topic
Using Elements hooks to display menu/content in Off Canvas Panel
7 replies · Started by Konstantin on August 24, 2021
Hi! I'm trying to display different menus and other content on different sections of my site using Elements and Hooks. It's working great when I use the available hooks and the custom_shortcode_hooks workaround for random areas of the site. However, I can't seem to figure out how to display those menus in the Off Canvas Panel using Elements Hooks with Display Rules, since there are no such off canvas hooks. There are the generate_iside_mobile_... hooks, but those don't seem to do the trick. I already know how to use the Off Canvas Widget area, but I can't set Display Rules on there. Thanks in advance!
Hi there,
there are two hooks you can use:
generate_inside_slideout_navigation
generate_after_slideout_navigation
The Off Canvas used to be called Slideout :)
Thank you, David! I am having some weird issue though. I have a menu assigned to the Off Canvas panel (the 3 items in all caps). The additional menu I display above does not show up on mobile. If I use my browser on desktop and resize to get the hamburger and click to get the Off Canvas panel, the additional menu still doesn't show up, until I expand the browser. I'm not using any CSS to hide that menu, so I'm not sure what's going on here.
Hi Konstantin,
Any chance you can link us to the site in question?
You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Let me know :)
Hi Ying. Login info provided in the field. Thank you!
I was able to figure it out. This is what was causing the issue:
@media (max-width: 768px) {
.main-navigation ul, .main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul, .gen-sidebar-nav, .has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(.navigation-search):not(.main-nav) {
display: none;
}
}The fix:
@media (max-width: 768px) {
.main-navigation ul {
display: block;
}
}Thank you!
Nice! Glad you figured it out!
