Rajesh Rathod

Available for New Projects

Replacing Default Hamburger Navigation Icon

Written by

Rajesh Rathod

in

I want to change default navigation hamburger icon to something different of my own choice? How to achieve that?

To change the default hamburger navigation icon to a custom one, you have several approaches depending on your platform and framework. Here’s how to do it:

Using CSS and HTML

The simplest approach is to replace the hamburger icon with your own custom icon:

<!-- Replace the default hamburger icon with a custom icon -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
  <!-- Remove the default span with navbar-toggler-icon class -->
  <!-- Add your custom icon instead -->
  <img src="your-custom-icon.svg" alt="Menu" width="24" height="24">
</button>

Using Font Icons (like Font Awesome)

If you’re using icon fonts:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
  <!-- Instead of the default hamburger icon -->
  <i class="fas fa-bars-staggered"></i> <!-- or any other icon -->
</button>

Using CSS to Customize the Default Icon

If you want to keep the default structure but modify the appearance:

css/* Override the default hamburger icon */
.navbar-toggler-icon {
  background-image: url("your-custom-icon.svg") !important;
  /* OR create a custom icon with CSS */
  background-image: none !important;
  position: relative;
}

.navbar-toggler-icon::before {
  content: "≡"; /* Or any other character */
  font-size: 24px;
  position: absolute;
  top: 0;
  left: 0;
}

For Specific Frameworks

Bootstrap

css.navbar-toggler-icon {
  background-image: url("your-custom-icon.svg") !important;
}

React

jsx<button className="navbar-toggler">
  <img src="/path/to/custom-icon.svg" alt="Menu" />
</button>

React Native

jsximport { TouchableOpacity, Image } from 'react-native';

<TouchableOpacity onPress={toggleMenu}>
  <Image source={require('./custom-icon.png')} style={{width: 24, height: 24}} />
</TouchableOpacity>

Changing the Hamburger Menu Icon in WordPress

For WordPress, you have several options to change the hamburger menu icon depending on your theme and whether you’re comfortable with code:

Option 1: Using CSS (No Plugin)

Add this CSS to your theme’s “Additional CSS” section in the Customizer (Appearance > Customize > Additional CSS):

css/* Hide the original hamburger icon */
.menu-toggle span,
.navbar-toggler-icon,
.menu-icon,
.menu-toggle::before,
.menu-toggle::after {
    display: none !important;
}

/* Add your custom icon using a Unicode character */
.menu-toggle::before,
.navbar-toggle::before,
.menu-icon::before {
    content: "\2630"; /* Example: trigram for heaven symbol */
    /* OR content: "\f0c9"; if using Font Awesome */
    font-size: 24px;
    display: inline-block !important;
}

/* If using Font Awesome */
.menu-toggle::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

You’ll need to inspect your site with browser developer tools to find the exact class names your theme uses for the hamburger icon.

Option 2: Using a Custom SVG/Image

Add this to your theme’s Additional CSS:

css/* Hide the original hamburger icon */
.menu-toggle span,
.navbar-toggler-icon {
    background-image: url('https://your-site.com/wp-content/uploads/your-custom-icon.svg') !important;
    background-color: transparent !important;
    background-size: contain !important;
}

Option 3: Using a Child Theme

If you’re comfortable with creating a child theme, you can modify the navigation.php or header.php file to replace the hamburger icon code.

Option 4: Using Plugins

Method A: Menu Icons Plugin

  1. Install and activate the “Menu Icons” plugin
  2. Go to Appearance > Menus
  3. Edit your menu items and add custom icons to each

Method B: Custom HTML Widget

If your theme allows adding widgets to the header:

  1. Add a “Custom HTML” widget
  2. Insert your custom icon HTML
  3. Use CSS to position it correctly

Option 5: Page Builders

If you’re using a page builder like Elementor, Divi, or Beaver Builder:

  1. Edit your header template
  2. Find the navigation/menu module
  3. Look for hamburger/mobile menu icon options
  4. Replace with your custom icon or choose from their icon library

Would you like me to elaborate on any of these options or provide specific code for your particular WordPress theme?

More posts