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

Home Forums Support [Resolved] Primary Navigation Menu (full on some pages and hamburger on others)

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

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1630019
    Ed

    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.

    #1630165
    David
    Staff
    Customer Support

    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 ?

    #1630553
    Ed

    It does … Secondary Nav remains.

    #1630866
    David
    Staff
    Customer Support

    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;
      }
    
    }
    #1631062
    Ed

    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.

    #1631523
    David
    Staff
    Customer Support

    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.

    #1631590
    Ed

    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!

    #1632381
    David
    Staff
    Customer Support

    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

    #1633791
    Ed

    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.

    #1634017
    David
    Staff
    Customer Support

    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.

    #1634488
    Ed

    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!

    #1634606
    David
    Staff
    Customer Support

    Awesome – glad to be of help!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.