How to customize the default Divi mobile menu<\/h2>\n\n\n\n
If you are using the default Divi menu<\/a>, you can follow these steps to customize the mobile menu.<\/p>\n\n\n\n The default Divi menu is limited in customization options. I will provide additional CSS snippets to customize it further. You can also consider building a custom menu in Divi > Theme Builder<\/strong>.<\/p>\n\n\n\n Go to Divi > Theme Customizer > Mobile Styles > Mobile Menu<\/strong>.<\/p>\n\n\n\n Under Text Color you can change the color.<\/p>\n\n\n\n As you can see in the image, the hamburger icon color changes as well. To prevent this, follow the next step.<\/p>\n\n\n\n For this, we need a little bit of CSS code. Go to Divi > Theme Options > CSS<\/strong> and place the following snippet.<\/p>\n\n\n\n Replace the color code with yours.<\/p>\n\n\n\n You can use this snippet to customize the mobile menu font size:<\/p>\n\n\n\n Go to Divi > Theme Customizer > Mobile Styles > Mobile Menu<\/strong>.<\/p>\n\n\n\n Under Background Color you can change the color.<\/p>\n\n\n\n The issue with this is that it also changes the background top bar color.<\/p>\n\n\n\n To change the top bar background color, you can use this snippet:<\/p>\n\n\n\n If you want to hide the logo for the mobile menu then go to Divi > Theme Customizer > Mobile Styles > Mobile Menu<\/strong>.<\/p>\n\n\n\n And enable Hide Logo Image.<\/p>\n\n\n\n If you are using a custom menu in the Theme Builder, you can customize the mobile menu in the menu module.<\/p>\n\n\n\n For all of the following settings, you need to go to Divi > Theme Builder > Global Header <\/strong><\/p>\n\n\n\n Then open up your menu module and go to the design tab.<\/p>\n\n\n\n From this point, you can follow these topics.<\/p>\n\n\n\n Go to Menu Text, here you can change all the settings for the mobile text. Just switch to the mobile tab.<\/p>\n\n\n\n I will give you an example of the text size for mobile.<\/p>\n\n\n\n You can do this for all of the following:<\/p>\n\n\n\n You can find the mobile menu background color under Dropdown Menu.<\/p>\n\n\n\n Under Icons, you can change the hamburger icon color and size.<\/p>\n\n\n\n Under Sizing > Logo Max Width<\/strong>, switch to mobile, and you can set a max-width value to make your mobile logo smaller. <\/p>\n\n\n\n If you want more advanced customizations, then you can follow any of these tutorials:<\/p>\n\n\n\nHow to customize the Divi mobile menu text colors<\/h3>\n\n\n\n
![\"Replace](\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Text-color-mobile-menu-Divi-1.jpg\")
<\/figure><\/div>\n\n\n\nHow to change the hamburger icon color<\/h3>\n\n\n\n
.mobile_menu_bar:before {\n color: #000000;\n}<\/code><\/pre>\n\n\n\nHow to change the mobile menu font size<\/h3>\n\n\n\n
.et_mobile_menu li a {\n font-size: 14px;\n}<\/code><\/pre>\n\n\n\nHow to change the mobile menu background-color<\/h3>\n\n\n\n
![\"Background](\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Background-color-mobile-menu-Divi.jpg\")
<\/figure><\/div>\n\n\n\n@media only screen and (max-width: 980px) {\n#main-header {\n background-color: #ffffff;\n}}<\/code><\/pre>\n\n\n\nHow to hide the Divi mobile logo<\/h3>\n\n\n\n
![\"Hide](\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Hide-the-logo-in-the-mobile-menu-in-Divi.jpg\"){kind=logo}
<\/figure><\/div>\n\n\n\nHow to customize the mobile menu in the Theme Builder<\/h2>\n\n\n\n
Mobile text customizations for the Theme Builder<\/h3>\n\n\n\n
![\"\"](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/04\/Mobile-menu-theme-builder.jpg\")
<\/figure>\n\n\n\nMobile menu backgound color in the Theme Builder<\/h3>\n\n\n\n
![\"Mobile](\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Mobile-menu-background-color.jpg\")
<\/figure><\/div>\n\n\n\nCustomize the hamburger icon<\/h3>\n\n\n\n
![\"Customize](\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Customize-the-hamburger-icon-color-and-size-in-Divi.jpg\"){kind=icon}
<\/figure><\/div>\n\n\n\nCustomize the mobile logo<\/h3>\n\n\n\n
![\"Change](\"https:\/\/mk0markhendriks8nxd9.kinstacdn.com\/wp-content\/uploads\/2021\/04\/Change-the-mobile-logo-size-in-Divi.jpg\"){kind=logo}
<\/figure><\/div>\n\n\n\nYou might also like…<\/h3>\n\n\n\n