This guide will explain how to resize the Mhmm hamburger and close icons using CSS.
We recommend following the suggestions below:
- Add all CSS below into the CSS box in Divi > Theme Options
- Use Chrome Dev tools to see your edits live
1. adjust the size of the hamburger & close icon
You can edit the ‘height’ property to change the thickness of the icons:
/* Adjust size of Mhmm hamburger icon */
.et_pb_mhmm_menu .menu-button:before,
.et_pb_mhmm_menu .menu-button:after,
.et_pb_mhmm_menu .menu-button div,
.et_pb_mhmm_menu_layout .menu-button:before,
.et_pb_mhmm_menu_layout .menu-button:after,
.et_pb_mhmm_menu_layout .menu-button div{
height: 10px;
}
/* Adjust size of Mhmm close icon */
.et_pb_mhmm_menu .menu-button-close:before,
.et_pb_mhmm_menu .menu-button-close:after,
.et_pb_mhmm_menu_layout .mhmm-active-trigger:before,
.et_pb_mhmm_menu_layout .mhmm-active-trigger:after{
height: 1px;
}
2. adjust spacing of the hamburger icon & close icon
After adjusting the thickness of the icons, you may need to adjust their spacing too. You can edit the ‘top’ of property as needed for desired look:
/* Adjust Mhmm hamburger line spacing */
.et_pb_mhmm_menu .menu-button:before,
.et_pb_mhmm_menu_layout .menu-button:before{
top: 0px;
}
.et_pb_mhmm_menu .menu-button:after,
.et_pb_mhmm_menu_layout .menu-button:after{
top: 27px;
}
/* Adjust Mhmm close icon spacing */
/* For popup close icon */
.et_pb_mhmm_menu .menu-button-close:after{
top: 17px;
}
.et_pb_mhmm_menu .menu-button-close:before{
top: 17px;
}
/* For transforming icon */
.et_pb_mhmm_menu_layout .mhmm-active-trigger:before,
.et_pb_mhmm_menu_layout .mhmm-active-trigger:after{
top: 14px;
}