Archived topic
Customising the nav menu
5 replies · Started by Asa on January 18, 2017
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?
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:
:)
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?
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 );
}
that worked a treat!
Thanks so much for your support Tom :)
You're welcome :)