[Support request] Moving secondary navigation menu to the sidebar but keep where is for mobile

[William]

Hi there,

I want to move the secondary navigation to a sidebar for desktop, but keep it where it is for mobile (at the top). Is there a way to do this? Is there also the ability to have elements just for mobile and desktop?

Kind regards,

Will

[Leo]

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 🙂

[William]

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:

[Leo]

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

[William]

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?

[David]

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;
    }
}

[William]

Amazing thank you!

[David]

Awesome – glad to be of help!

[Author]

Posts