Adjust Hamburger Menu Icon

This CSS will allow you to change the appearance of the hamburger menu icon in GeneratePress.

Inside the GeneratePress mobile menu, you may want to change the size or appearance of your hamburger menu icon.

To target this element you need to use the selectors provided below. Then you can change the color, padding, size, and overall appearance of the hamburger menu icon.

.main-navigation .menu-toggle, .main-navigation .menu-bar-items {
  font-size: 18px;
  padding: 4px;
  line-height: 1;
  color: white;
  background-color: black;
  border-radius: 4px;

The code provided gives you a head start on changing the size, padding, line height, color, background color and border radius. You don’t have to adjust all these things, and you might add more depending on your design.

Kyle Van Deusen

Co-founder of The Admin Bar Community, owner of OGAL Web Design, and a GeneratePress & GenerateBlocks enthusiast.

For official support, please visit the forums for GeneratePress or GenerateBlocks

If you're looking to have a website built with GeneratePress & GenerateBlocks, then visit my agency website.

Leave a Comment