-
Hi,
I am hoping to use the header example #7 on this page https://docs.generatepress.com/article/header-examples/ , but slightly differently:1. I would like the vertical navigation to be the Secondary Navigation (I am building a member area)
2. I need this menu to only be on select pages (I can do this using disable elements, but wanted to mention this would not be site wide)I have searched and searched support and can’t find an example like this. The code linked above will not work because it seems to move the site header instead of just the secondary navigation.
Can this be done?
-
Hi there,
I think your use case scenario is quite similar to this topic here:
https://generate.support/topic/advice-on-placing-a-menu/You can check out my suggestion there and see if my approach is applicable to your use case.
-
Ok that is looking like a possiblity. Instead of using the navigation block, which I find limiting, I can build my own list of links. But I need to find a way for this menu to work on mobile only on these pages.
Is there a way for the off canvas menu to be only on some pages? I dont see off canvas menu in disable elements.
Or do you have a better way of building a menu that works responsively?
-
In that case, you will need to create a special menu only for the particular pages that only members have access to. Then, you can use this plugin to set the visibility condition of the menu to only appear on those pages:
https://wordpress.org/plugins/conditional-menus/ -
I know how to conditionaly show items. My question is more about HOW to create a menu in this sidebar block that will function as a menu responsively.
-
In this scenario, it’s quite challenging to make the sidebar behave responsively on mobile. In my opinion, it would be better to hide it on mobile and utilize the off-canvas menu to show the page-specific menu.
-
Do you know how I can show the off-canvas menu only on specific pages? It is not an option in “disable elements”. Is there some code I can add maybe?
-
You can try using this PHP filter:
add_filter('option_generate_menu_plus_settings', function ($options) { $page_ids = array(10, 20, 30); // Replace these with the page IDs if (!in_array(get_queried_object_id(), $page_ids)) { $options['slideout_menu'] = 'false'; } return $options; });Just note the page IDs of the pages where you want to disable the off-canvas menu and add them inside the
$page_idsarray. -
This worked. I modified it to work in reverse (I enabled it only for select pages).
The problem I face now is that on the select pages, I need both menus to appear on mobile. Similar to how the primary and secondary menu both appear on mobile.
Right now what is happening is both menus are displaying correctly on desktop, but on mobile only the primary mobile menu appears. How can I get the slide out off canvas menu to appear along with the primary menu?
I do have this CSS in place (found in another support forum post), which allows the slide in menu to always be visible when on desktop. Maybe that is causing a conflict?
/* display off panel menu without hamburger */
:root {
–sticky-top: 0;
–top-offset: 50px; /* height of main navigation */
}
body.admin-bar {
–sticky-top: 32px; /* height of admin bar */
}
@media(min-width: 1024px) {
.slideout-toggle {
display: none;
}
#page {
padding-left: var(–gp-slideout-width)
}
#site-navigation {
position: sticky;
top: var(–sticky-top);
}
#generate-slideout-menu {
display: block;
left: 0;
/* top: calc( var(–top-offset) + var(–sticky-top) ) */
top: 30px;
}
}What can I do to fix this? The site is behind a coming soon page and you’ll need to login, so I’ve shared admin access to this staging site with you.
-
Hi there,
the Javascript that opens the Off Canvas , listens for a click on certain elements eg.
slideout-toggleSo you could try hooking in a button with a CSS Class of:
slideout-toggleinto your mobile header.
And that “should” trigger the off canvas for you.Alternatively – have you considered having the Off Canvas panel as your default mobile menu, and simply hook in the extra menu items for the member links
- You must be logged in to reply to this topic.