[Support request] Secondary menu in Primary menu nav bar

[nictic]

Hi. I would like to know if there is a solution or what is the best solutions rather (maybe using the hooks to some extent also?)
1) to have the secondary menu in the same nav bar as the primary but then have the secondary menu float/sit on the right in the nav bar, while the primary menu remains on the left.

2) on mobile view how to accomplish a slide-out menu for the secondary menu like with the primary menu. So if the primary is on the left, the slide out for the primary opens from the left, as it is doing currently and the secondary menu on the right’s slide-out wold open from the right.

I have played with the css a bit to come up with a temp rough hack just for example. See images, one is desktop view the other mobile view
[url=https://ibb.co/fTPNxk][img]https://preview.ibb.co/gb7LiQ/menu_example1.jpg[/img][/url]
[url=https://imgbb.com/][img]https://image.ibb.co/nGppck/menu_example2.jpg[/img][/url]
[url=https://imgbb.com/]easy picture upload[/url]

[Tom]

Tough question!

It would probably work, but there’s likely some quirks and some CSS styling that would need to be done.

Some PHP:

add_action( 'generate_inside_navigation', 'tu_secondary_nav_inside_primary' );
function tu_secondary_nav_inside_primary() {
	if ( function_exists( 'generate_secondary_navigation_position' ) ) {
		generate_secondary_navigation_position();
	}
}

Some CSS:

#site-navigation #secondary-navigation {
    float: right;
}

[nictic]

Ah thanks, that’s so close, but needs some tweaking still it seems. I added the php using the snippets plugin. If I have the secondary set as float right in the customizer then there’s no need for your css. If I put the position to above or below header then it is needed. But regardless, it is still somewhat off as you can see in the screenshots. And the secondary menu displays twice.
Also note that clicking the secondary’s mobile icon (when on mobile) triggers the main slide-out menu also for some reason. I would like it to have it’s own slide out independent of the main slide-out.

[url=https://ibb.co/g5Ahxk][img]https://preview.ibb.co/n8pxV5/menu_example1_1.jpg[/img][/url]
[url=https://ibb.co/hqvt3Q][img]https://preview.ibb.co/hydrq5/menu_example2_1.jpg[/img][/url]

[Tom]

Yea, you’ll need to set the location to no navigation in the Customizer, or it will display twice.

Hmm, not sure it will work on mobile for that reason – it would require the JS that controls the mobile menu toggle to be re-written. It wasn’t written with this kind of usage in mind I’m afraid.

[nictic]

So just to be clear, you are saying that if we use the php you gave to add the secondary menu in the same nav bar as the primary, the mobile menu toggle js would need to be rewritten? Meaning my plain css method I fiddled with might be the easiest solution? No other method you can think of perhaps?

[Tom]

Yea, I don’t think the JS will work with the one navigation inside the other unfortunately. You’ll likely need to go the CSS route.

[Author]

Posts