- This topic has 11 replies, 2 voices, and was last updated 3 years, 2 months ago by David.
-
AuthorPosts
-
January 22, 2021 at 10:47 pm #1630019Ed
I’ve searched support topics, and I can’t find a specific answer to my question. On desktop view, I want to display “default” primary navigation menu on some pages and hamburger primary navigation menu on others. Setting high breakpoint for mobile navigation doesn’t work because that is site wide (and also impacts secondary navigation menus). I was thinking a hook element may work (since display rules are so effective and easy to target for specific pages). Other approaches?
Why do I want to do this? When a secondary navigation menu is present, I want to declutter page by turning primary navigation menu into a hamburger menu.
January 23, 2021 at 3:12 am #1630165DavidStaffCustomer SupportHi there,
so on these specific pages where the Mobile menu is always displayed – what happens with the Secondary Nav – does that remain in Desktop view ?
January 23, 2021 at 8:29 am #1630553EdIt does … Secondary Nav remains.
January 23, 2021 at 4:18 pm #1630866DavidStaffCustomer SupportTricky – give this CSS a try:
@media (min-width: 769px) { .secondary-nav-below-header .inside-header .mobile-menu-control-wrapper .menu-toggle { display: block; } .secondary-nav-below-header #site-navigation .menu-bar-items, .secondary-nav-below-header #site-navigation:not(.toggled){ display: none; } .secondary-nav-below-header .nav-align-right .inside-navigation, .secondary-nav-below-header .nav-align-center .inside-navigation { justify-content: space-between; } .secondary-nav-below-header .has-inline-mobile-toggle .mobile-menu-control-wrapper { display: flex; flex-wrap: wrap; } .secondary-nav-below-header .has-inline-mobile-toggle .inside-header { flex-direction: row; text-align: left; flex-wrap: wrap; } .secondary-nav-below-header .has-inline-mobile-toggle .header-widget, .secondary-nav-below-header .has-inline-mobile-toggle #site-navigation { flex-basis: 100%; } .secondary-nav-below-header .nav-float-left .has-inline-mobile-toggle #site-navigation { order: 10; } }
January 24, 2021 at 12:42 am #1631062EdIt does seem tricky. There are two issues. 1) it disables navigation search option (when enabled in the primary menu). And 2) how do I get it to show up only on specific pages (and not site wide)? By including as “additional CSS” it gets applied site wide.
January 24, 2021 at 7:07 am #1631523DavidStaffCustomer SupportQuestion ( before i relook at this method ) – would you be happy with using the Off Canvas Panel ?
https://docs.generatepress.com/article/off-canvas-panel-overview/
If you add the same menu to both the Primary Nav and the Off Canvas then we can simply hide the main menu / off canvas hamburger for the two different requirements.
Let me know.
January 24, 2021 at 8:28 am #1631590EdYes. I think that would work. If I understand it correctly, for pages where there is a second default navigation menu, I could hide primary navigation menu and switch to off canvas option. Primary navigation would be off-canvas and secondary would remain default on selected pages. This is probably a better option since off-canvas is an overlay layer and doesn’t result in a new menu that pushes content at the top of the page. And I’d like to keep search option available if possible. Yes, let’s give this a try!
January 25, 2021 at 2:06 am #1632381DavidStaffCustomer SupportCan you enable the Off Canvas Panel in Customizer > Layout > Off Canvas. I would assume just for Desktop.
Then edit your Menu for the primary nav and include the Off Canvas Location.
Once i can see it ill figure out the CSSJanuary 26, 2021 at 1:06 am #1633791EdHi David. I was able to figure out a solution via a plugin (conditional menus) and use of a conditional filter for off panel canvas menu option. Plugin was needed to make use of multiple secondary navigation menus.
I am still having a problem with display of navigation search box. Via conditional menus, there is a “blank” primary navigation menu that precedes search icon. Search box doesn’t fill area because there is nothing to fill. I’ve played around with CSS and can’t make it work? I would like it to extend to full search box as normal, or as it does in mobile.
January 26, 2021 at 4:47 am #1634017DavidStaffCustomer SupportCool 🙂 So this CSS will correct that:
@media(min-width: 769px) { .main-navigation .inside-navigation { min-width: 500px; } .menu-bar-items { margin-left: auto; } .search-form.navigation-search.nav-search-active { right: unset; max-width: 440px; } }
But its going to apply that CSS to pages even without the Secondary Nav. ( I didn’t realise the class for the secondary-nav gets added to the body whether its displayed or not ).
You can hook the CSS inside
<style></style>
in thewp_head
hook for just the pages you want it applied.January 26, 2021 at 8:59 am #1634488EdAmazing. It’s working great. And I learned a ton along the way. Not sure if I will keep this menu configuration, but for now, it’s doing the job. Thank you so much!
January 26, 2021 at 10:18 am #1634606DavidStaffCustomer SupportAwesome – glad to be of help!
-
AuthorPosts
- You must be logged in to reply to this topic.