[Resolved] Move secondary navigation to other locations

[Paul]

Hi Tom,

I’d like to move my secondary navigation to other parts of a page other than just above or below the site header. In this case, I’d like to embed the secondary navigation bar into a page section on my home page only, perhaps with use of a shortcode. What would be the best practice for accomplishing this?

[Tom]

Hi Paul,

You could try creating a shortcode (not 100% sure it will work).

function generate_secondary_navigation_shortcode() {
      return generate_secondary_navigation_position();
}
add_shortcode( 'generate_secondary_navigation', 'generate_secondary_navigation_shortcode' );

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

Then you might be able to use the [generate_navigation] shortcode in your Sections.

[Paul]

Worked like a charm, Tom.

For anyone wanting to do this also, I just:
1) pasted Tom’s code into my GP child theme’s functions.php file
2) added [generate_secondary_navigation] to a section on the page (in my case section 2)
3) double-checked that Secondary Navigation was not checked in the Disable Elements box
4) clicked Update

That made the secondary nav appear twice on the page: one above the header, and one in the section where I really wanted it.

To hide the unwanted secondary nav appearing in the header, I used the following CSS in my GP child theme style.css file:

.main-nav {
	display: none;
}
#generate-section-2 .main-nav {
	display: block !important; 
}

Be sure the change #generate-section-2 in the code above to reflect the number of the section you’re actually using the shortcode in.

[Tom]

Awesome, glad that worked for you 🙂

[Paul]

Oops, one error.

.main-nav in the above CSS needs to be replaced with #menu-second-menu so the links in the primary navigation don’t disappear!

[Tom]

I would use this instead:

.secondary-navigation {
	display: none;
}
#generate-section-2 .secondary-navigation {
	display: block !important; 
}

[Paul]

Cool beans. I made the changes and they’re working fine. Thanks for the suggestion!

[Tom]

No problem!

[Paul]

Well, I thought it worked. When viewing the secondary nav on mobile devices, the drop-down menu doesn’t work. The mobile icon and menu name appears, but not the drop-down which is supposed to show the sub-pages. Do I need to add additional code to what you suggested to functions.php?

[Tom]

Can you link me to the page possibly?

[Paul]

It’s on localhost only right now.

[Tom]

Ok – I’ll try and find some time in the morning to put it into a shortcode and do some testing.

I’ll get back to you 🙂

[Paul]

Just had a thought: could it have to do with z-index? Perhaps the drop-down IS happening, but is being obscured by the following section. Or maybe it is not increasing the height of the section that it’s contained in so as to be viewable? Not sure how to tell if either is occurring though. Hmmm.

[Tom]

It had to do with overflow.

Try this CSS:

.site-main .inside-navigation {
    margin: 0;
    overflow: visible;
}

[Paul]

Gave it a try, but no go. FWIW, I am using Menu Plus. Not sure if that makes any difference though. The secondary nav does work in it’s typical positions above and below the site header, just not as a short code in a page section, which is where I need it.

I’m wondering if anything is missing from the shortcode that I pasted into functions.php?

[Author]

Posts