[Resolved] Duplicate Secondary Nav Below Primary Nav for Mobile

[Arthur]

I have a Secondary Nav above the Primary Nav on desktop view and I want to hide the Secondary Nav on mobile and display it below the Primary Nav on mobile in either the default dropdown style or the Slide Out style.

Would I need to create a hook to place the Secondary Nav menu below the Primary Nav (possibly via wp_nav_menu() and the generate_inside_navigation)?

add_action('generate_inside_navigation', 'dup_secondary_nav');
function dup_secondary_nav() {
wp_nav_menu(array( 'theme_location' => 'secondary_nav' ))
}

Please help.

[David]

Hi there,

how about creating a new menu that is a combination of those used in the Primary and Secondary Navs and then assign this to the Slideout Navigation?

[Arthur]

Thanks for the quick response David. I didn’t want to have to manage multiple (or duplicate) menu items. I want to take the current Secondary Nav and generate it again below the Primary Nav.

Does that make sense?

[David]

Just to be clear, on mobile will you be displaying Two Hamburger menus (primary on top / secondary below)?

[Arthur]

No. In the DOM, the Secondary Nav will be placed below the Primary Nav. I believe I can use the Primary Toggle to open both menus. Is that possible?

You can see an example here (this sample is from a custom theme): http://www.odifusa.com/about-us/

[Tom]

I don’t think there’s a good way to merge them really. From a performance standpoint, creating a separate Slideout Navigation menu is the way to go.

I suppose you could try javascript to move the secondary navigation items into the slideout navigation, but that would be less than ideal when it comes to performance.

[Arthur]

Thanks Tom and David.

[Tom]

No problem!

[Author]

Posts