Primary Navigation Menu (full on some pages and hamburger on others)

Hi 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 ?

It does ... Secondary Nav remains.

Tricky - 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;
  }

}

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

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

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

Can 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 CSS

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

Cool :) 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 the wp_head hook for just the pages you want it applied.

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

Awesome - glad to be of help!