How to change menu icon ( three dots ) to hamburger menu icon ( three lines)?

  • akopacsi

    (@akopacsi)


    3 years ago

    I would like to replace the default icon of the menu ( three dots ) with a more commonly used hamburger menu icon ( three lines )?
    I would be grateful if someone could help me.

Viewing 1 replies (of 1 total)

  • Hi, akopacsi, please try using the following code and insert it into your functions.php file or with a plugin such as Code Snippets:

    add_filter( 'twentytwenty_svg_icons_ui', 'replace_ellipses_menu_ian' );

function replace_ellipses_menu_ian( $iconsArr )
{
	$iconsArr['ellipsis'] = '<svg version="1.1" width="124px" height="124px" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 124 124" >
	<path d="M112,6H12C5.4,6,0,11.4,0,18s5.4,12,12,12h100c6.6,0,12-5.4,12-12S118.6,6,112,6z"/>
	<path d="M112,50H12C5.4,50,0,55.4,0,62c0,6.6,5.4,12,12,12h100c6.6,0,12-5.4,12-12C124,55.4,118.6,50,112,50z"/>
	<path d="M112,94H12c-6.6,0-12,5.4-12,12s5.4,12,12,12h100c6.6,0,12-5.4,12-12S118.6,94,112,94z"/>
	</svg>';
	
	return $iconsArr;
	
}

    And then here is some CSS (add via customizer) to make the icon resize correctly:

    .nav-toggle .toggle-icon, .nav-toggle svg {
    height: 1.25rem;
}
Viewing 1 replies (of 1 total)
  • The topic ‘How to change menu icon ( three dots ) to hamburger menu icon ( three lines)?’ is closed to new replies.

Tags