Moving secondary navigation menu to the sidebar but keep where is for mobile

Hi Will,

Unfortunately I'm not aware of a solution for this.

One workaround I can think of is to use a navigation widget in the sidebar, and we can use CSS to hide it on mobile.

Let me know if this works for you :)

That could work, but I would still would like the menu to appear on mobile too, though.

For example, in the sidebar like this:

And then for mobile, to appear as standard like this:

I guess we could hide the secondary navigation on desktop and the menu widget on mobile?

Possibly. How would that work? I currently have the secondary navigation set for left sidebar.

Is there any scope to have menus appear differently for desktop and mobile? A rule that looks at the width of screen and changes the location of the menu accordingly?

Hi there,

moving the Secondary Navigation out of the sidebar and to another container would require Javascript, and personally i don't like that method as theres a risk that JS blockers on a browser may just break something.

Instead you would need to hook in a replica of the Secondary Navigation using a hook element with this HTML/PHP:

<div class="second-nav grid-container hide-on-desktop hide-on-tablet">
	<?php 
	if ( function_exists( 'generate_secondary_navigation_position' ) ) {
		generate_secondary_navigation_position();
	}
	?>	
</div>

Try the generate_after_header hook

I included the hide-on-desktop hide-on-tablet classes in the above HTML. Then you jut need some CSS to hide the sidebar one on Mobile:

@media(max-width: 768px) {
    .gen-sidebar-secondary-nav {
        display: none;
    }
}

Amazing thank you!

Awesome - glad to be of help!