Snippets

Snippet: Change Mobile Menu Hamburger Icon Size

  • Updated:

Here is an example CSS to make the hamburger icon bigger in the Total WordPress theme. The way the icon works is by having a span set to a fixed height and width. Inside it is another span set to 100% width with a background and a fixed height (default is 2px). Then there are pseudo elements added before and after this span with the same height and background also set to 2px height positioned either above or below using top/bottom css positioning. So basically to tweak the size you just need to do some math and figure out how tall you want each bar and the spacing between them and tweak your css accordingly. In this example CSS we've made the items 3px instead of 2px tall and then the overall toggle wider (24px instead of 20px). So we've got 3 bars at 3px each and a 4px spacing between them which gives us a 17px height for the whole element.

#mobile-menu .wpex-bars {
    height: 17px;
    width: 24px;
}

#mobile-menu  .wpex-bars>span, #mobile-menu  .wpex-bars>span::before, #mobile-menu  .wpex-bars>span::after {
    height: 3px;
}

#mobile-menu  .wpex-bars>span::before {
    top: -7px;
}

#mobile-menu  .wpex-bars>span::after {
    bottom: -7px;
}

/* Note: Instead of doing all the code above you could also just use css transform instead like this...*/
#mobile-menu .wpex-bars { transform: scale(1.2); }
Learn how to add custom CSS to your site.
Back To Top