[Resolved] Customising the nav menu

[Asa]

Hi,

I would like make my top navigation appear like http://www.marieclaire.com/

Specifically, with the hamburger icon appearing to the left, followed by the logo and then the regular nav links.

What can I do to achieve this look?

[Tom]

Hi there,

Possible with some custom code.

Adding this PHP:

remove_filter( 'wp_nav_menu_items','generate_menu_plus_slidebar_icon', 10, 2 );
add_action( 'generate_inside_navigation','tu_custom_menu_plus_slidebar_icon', 0 );
function tu_custom_menu_plus_slidebar_icon() 
{
	if ( ! function_exists( 'generate_menu_plus_get_defaults' ) )
		return;
	
	$generate_menu_plus_settings = wp_parse_args( 
		get_option( 'generate_menu_plus_settings', array() ), 
		generate_menu_plus_get_defaults() 
	);
	
	// If the search icon isn't enabled, return the regular nav
	if ( 'desktop' !== $generate_menu_plus_settings['slideout_menu'] && 'both' !== $generate_menu_plus_settings['slideout_menu'] )
		return $nav;
	
	echo '<li class="slideout-toggle"><a href="#generate-slideout-menu" data-transition="overlay"></a></li>';
}

Adding PHP: https://docs.generatepress.com/article/adding-php/

Then add this CSS: https://docs.generatepress.com/article/adding-css/

Then upload your navigation logo: https://docs.generatepress.com/article/sticky-navigation/

Hope this helps 🙂

li.slideout-toggle {
    line-height: 0;
}

li.slideout-toggle a {
    color: #FFF;
    display: block;
    line-height: 60px;
}

Adding CSS:

[Asa]

🙂

Thanks Tom.

I have the hamburger icon hooked in, however the remove_filter doesn’t seem to hide the original icon which is currently sitting on the right. I now have 2 of them..

remove_filter( 'wp_nav_menu_items','generate_menu_plus_slidebar_icon', 10, 2 );

Any ideas?

[Tom]

Try this:

add_action( 'after_setup_theme','asa_remove_icon' );
function asa_remove_icon() {
    remove_filter( 'wp_nav_menu_items','generate_menu_plus_slidebar_icon', 10, 2 );
}

[Asa]

that worked a treat!

Thanks so much for your support Tom 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts