Divi Toolbox ➜ Mobile ➜ Enable Custom Mobile Menu Style
Enable this option to add a new customization panel called Mobile in the Toolbox Customizer with the following subsections: Mobile Menu Bar, Hamburger Icon, Mobile Search, Mobile Menu, Mobile Menu Links.
Plase note:
Below, you’ll find the list of all available controls, but if you’d like to have even more control over the style of your mobile menu – check the Separate Mobile Menu Style with extended styling options.
Toolbox Customizer ➜ Mobile
Here’s the list of all the settings you can easily change:
Mobile Menu Bar
- Hide top bar (phone & email)
- Enable fixed mobile bar
- Make menu bar fullwidth
- Menu bar height (px)
- Logo height (%)
- Add menu bar box shadow
- Shadow color, shadow offset-y, blur
- Menu bar background color
Hamburger Icon
- Icon color when menu closed
- Icon color closed on hover
- Icon color when menu opened
- Icon color opened on hover
- Hamburger icon size (Default, Large)
Mobile Search
- Hide search icon on mobile
- Search icon color
- Search icon color on hover
- Close search icon color
- Close search icon color hover
- Search and Close search icon size (Default, Large)
- Search input field text color
Mobile Menu
- Make mobile menu fullwidth
- Mobile menu animation (Slide Down, Slide In from Right)
- Dim background when open
- Background color
- Add box shadow
- Shadow color, offset-y, offset-x, blur
- Mobile menu background color
Mobile Menu Links
- Link font family
- Link font weight
- Link font size
- Link letter spacing
- Link text transform (uppercase, lowercase, capitalize)
- Link padding
- Link color
- Link bottom border color
- Parent link background color
- Link background color on hover
- Link color on hover
CTA Menu Link
- CTA item font family
- CTA item font weight
- CTA item font size
- CTA item letter spacing
- CTA item text transform (uppercase, lowercase, capitalize)
- CTA item padding
- CTA item color
- CTA item background
- CTA item hover color
- CTA item hover background color
Plase note:
These effects apply to the default Divi navigation. If you are using a custom Theme Builder Header and you’d like to use the same mobile menu styles on Menu or Fullwidth Menu module – navigate to module Settings ➜ Advanced tab ➜ CSS ID & Classes ➜ CSS Class and add a custom class of: dtb-menu
