[Resolved] Moving secondary mobile menu

[Gary L]

On my mobile view the secondary menu is at the bottom, it’s appearing as 3 lines with the words Menu next to it. Is it possible to move this to the top under the Main Menu? Just on mobile, nothing else.

Thanks

[Gary L]

Hello?

[Leo]

Hi there,

Sorry for some reason we didn’t get a notification for this topic.

Link to your site isn’t working. Can you double check?

[Gary L]

http://7i54.com is the site. Thanks

[Tom]

Hi there,

Not 100% sure this will work, but try this function:

add_action( 'wp_footer', 'tu_clone_sidebar_secondary_navigation' );
function tu_clone_sidebar_secondary_navigation() {
	?>
	<script>
		var target, nav, clone;
		nav = document.getElementById( 'secondary-navigation' );
		if ( nav ) {
			clone = nav.cloneNode( true );
			clone.className += ' sidebar-nav-mobile';
			target = document.getElementById( 'site-navigation' );
			if ( target ) {
				target.insertAdjacentHTML( 'afterend', clone.outerHTML );
			}
		}
	</script>
	<?php
}

Then add this CSS:

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

[Gary L]

Wow that did the trick, they are both at the top!

this is not that important but the secondary menu is darker or bolded text which is ok, is there a way to name it “menu 2” or something…

if not or a pain for these that’s fine, it looks great!

Thanks

[Leo]

Should be able to use this option here: https://docs.generatepress.com/article/secondary-mobile-menu-label/

[Gary L]

That’s it, Thanks!

[Tom]

Glad we could help! 🙂

[Author]

Posts