[Resolved] How to change 3 bar menu icon to better one?

[Tom]

Ah, it’s working on mobile but not desktop.

To get it to work on desktop, try this PHP:

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

add_filter( 'wp_nav_menu_items', function( $nav, $args ) {
    if ( 'primary' === $args->theme_location ) {
        return $nav . '<li class="slideout-toggle custom-slideout-toggle menu-item-align-right"><a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg></a></li>';
    }

    return $nav;
}, 10, 2 );

Then add this CSS:

.custom-slideout-toggle a:before {
	display: none;
}

.custom-slideout-toggle {
	height: 60px;
	display: flex;
	align-items: center;
}

.custom-slideout-toggle svg {
	fill: white;
	height: 25px;
	width: 25px;
	display: flex;
	align-self: center;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Adam]

After adding the PHP I had x2 icons, then after adding the CSS both icons have now disappeared?

[Adam]

That might be because it was colored white 🙂

[Adam]

Still, the icon does not look as good as on this website: https://www.saltygecko.co.uk/ for some reason the edges look blurred to me?

[Tom]

Ok, let’s scrap everything we added in this post and start over: https://generatepress.com/forums/topic/how-to-change-3-bar-menu-icon-to-better-one/page/2/#post-962154

Instead, we’ll create the lines using CSS, instead of an icon.

First, add this PHP:

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

add_filter( 'wp_nav_menu_items', function( $nav, $args ) {
    if ( 'primary' === $args->theme_location ) {
        return $nav . '<li class="slideout-toggle menu-item-align-right"><a href="#"><span></span></a></li>';
    }

    return $nav;
}, 10, 2 );

Then, add this CSS:

.main-navigation .main-nav ul li.slideout-toggle a > span,
.menu-toggle span {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 30px;
    padding: 0;
}

.slideout-toggle a > span:before,
.slideout-toggle a > span:after,
.menu-toggle span:before,
.menu-toggle span:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.slideout-toggle a > span:before,
.menu-toggle span:before {
  top: 8px;
}

.slideout-toggle a > span:after,
.menu-toggle span:after {
  top: -8px;
}

.slideout-toggle a:before {
  display: none;
}

.main-navigation .main-nav ul li.slideout-toggle a {
    height: 90px;
    display: flex;
    align-items: center;
}

.menu-toggle {
  height: 90px;
}

.menu-toggle .gp-icon {
  display: none;
}

.menu-toggle .mobile-menu:empty {
  padding-left: 0;
  display: block;
}

[Sergio]

Hi,

This filter doesn’t work for me.

I have turned on SVG icons in Customize > General and put that filter in CODE SNIPPETS…but doen´t work.

Any help please?

Thanks in advance

[Tom]

This article has all the updated info on these kinds of menu toggles: https://docs.generatepress.com/article/animated-hamburgers/

[Sergio]

Thanks a lot, Tom!!

[Tom]

No problem!

[Author]

Posts