- This topic has 5 replies, 2 voices, and was last updated 9 years, 2 months ago by
.
-
Posts
-
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?
Lead Developer
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 🙂
- You must be logged in to reply to this topic.
