Mobile Menu Style (extended)

Missing feature?

If there is a feature or option you feel is missing, feel free to get in touch! We’ll do our best to include it in the future Divi Toolbox version!

Maybe you’ve found a plugin setting that is not included in our documentation – please let us know.

 

Divi Toolbox ➜ Mobile ➜ Enable Custom Mobile Menu Style ➜ Use a separate mobile menu with more styling options

To unlock all extended customization options for the mobile menu enable the “Use a separate mobile menu with more styling options” option.

Assign the Mobile Menu

You can choose any Menu and it will be used globally as the mobile menu. It can include different menu items than the desktop menu version.

Additional Mobile Menu Elements:
  • Shopping Cart Link (if WooCommerce enabled)

You can select which additional elements you’d like to display inside the mobile menu. Each will enable additional customization panels in the Theme Customizer (available controls are listed below). The Widget Areas option adds two new widget areas: “Before Mobile Menu” and “After Mobile Menu”, which you can use to display any additional content inside your mobile menu, including a Divi Layout (using custom layouts shortcode functionality).

Use Custom Menu Trigger

You can use this option if you’d like to replace the default hamburger icon with fixed button. The button can include the hamburger icon and additional text.

 

Toolbox Customizer ➜ Mobile

 

Here’s the list of all the settings you can easily change:

 

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)
Menu Bar Search Icon
  • 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 Trigger
  • Trigger position (top, bottom)
  • Alignment (left, centered, right)
  • Trigger Container Margin
  • Trigger Width
  • Trigger Height
  • Background Color
  • Background Hover Color
  • Opened Trigger Background Color
  • Opened Trigger Background Hover Color
  • Trigger Text
  • Text Position (left, rgiht, above, below the icon)
  • Text font
  • Text font weight
  • Text font size
  • Text Letter Spacing
  • Text Color
  • Text Color on Hover
  • Opened Trigger Text Color
  • Opened Trigger Text Hover Color
  • Trigger Border width
  • Border radius
  • Border color
  • Border hover color
  • Opened Trigger border color
  • Opened Trigger border hover color
  • Shadow color, shadow offset-y, blur
Mobile Menu Container
  • Menu container Fullwidth
  • Set max width
  • Container Alignment
  • Container Background color
  • Add background image
  • Background image size, position, blend mode
  • Add background gradient
  • Background gradient color1/color2
  • Background gradient direction
  • Place gradient above the image
  • Container padding (top, right, bottom, left)
  • Container margin (top, right, bottom, left)
  • Shadow color, shadow offset, blur
Mobile Menu Animation
  • Enable page animation
  • Menu animation on open (20+ animation types)
  • Menu animation on close (20+ animation types)
  • Add page overlay when open
  • Overlay background color
Mobile Menu Logo
  • Mobile menu logo width
  • Mobile menu logo max width
  • Logo alignment
  • Logo margin (toip, right, bottom, left)
Mobile Menu Links
  • Links container margin (top, right, bottom, left)
  • Link font family
  • Link font weight
  • Link font size
  • Link letter spacing
  • Link text transform (uppercase, lowercase, capitalize)
  • Link text alignment
  • Link padding (top, right, bottom, left)
  • Links bottom margin
  • Links border width (top, right, bottom, left)
  • Links border radius
  • Links border color
  • Link color
  • Link color on hover
  • Link background color
  • Link background color on hover
  • Parent link color
  • Parent link background color
  • Parent link font weight
Mobile Menu CTA Button
  • CTA button full-width
  • CTA button alignment
  • CTA button margin (top, right, bottom, left)
  • CTA button padding (top, right, bottom, left)
  • 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 font color
  • CTA item background color
  • CTA item hover color
  • CTA item hover background color
  • CTA button border width
  • CTA button border radius
  • CTA button border color
  • CTA button border hover color
  • Shadow color, shadow offset, blur
Mobile Menu Search Bar
  • Search bar placement (before, after navigation)
  • Search bar width
  • Search bar max width
  • Search bar alignment
  • Search bar margin (top, right, bottom, left)
  • Search field background color
  • Search field vertical padding
  • Search field horizontal padding
  • Search input field font
  • Search field font weight
  • Search field font size
  • Search field font letter spacing
  • Search field font text transformation
  • Search field border radius
  • Search field border width
  • Search field border color
  • Active field border color
  • Active field background color
  • Actibve field font color
  • Search icon font size
  • Search icon color
  • Search icon background color
  • Search icon padding
  • Search icon border-radius
  • Search icon left margin
Mobile Menu Widgets
  • Widgets container margin (top, right, bottom, left)
  • Widget title alignment
  • Widget title font
  • Widget title font weight
  • Widget title font size
  • Widget title letter spacing
  • Widget title text transformation
  • Widget title color
Mobile Menu Shopping Cart Link
  • Shopping cart link margin (top, right, bottom, left)
  • Shopping cart link padding (top, right, bottom, left)
  • Shopping cart link background color
  • Shopping cart link border width
  • Shopping cart link border radius
  • Shopping cart link border color
  • Shopping cart link alignment
  • Shopping cart link font
  • Shopping cart link font weight
  • Shopping cart link font size
  • Shopping cart link letter spacing
  • Shopping cart link text transformation
  • Shopping cart link text color
  • Shopping cart link hover color
  • Shopping cart link hover border color
  • Shopping cart link hover background color
  • Shopping cart link icon color
  • Shopping cart link icon size
  • Shopping cart link icon hover color
Mobile Menu Social Icons

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

Hi there!

If you have any questions or would like to get in touch, please fill the form below and we’ll get back to you as soon as possible.

Did you know?

You can create popups and effects like this one with Toolbox! It's so easy!

Ahhh yes!

You officially know the power of the irresistible 3D Button :D

You can easily design Popups like this one using Toolbox and Divi Builder!

Did you know?

Do you like this landing page? Does it look pretty advanced? Well, guess what! We didn’t use even a tiny bit of custom CSS or JavaScript to build it. All the awesome effects have been created using the Divi Toolbox!

Pricing

Choose the plan to suit your needs

Regular License

Single Site
€49
  • Lifetime updates
  • One-time fee, no annual payments!
  • 6 months outstanding support
  • Use on one website

Extended License

Unlimited Sites
€ 169
  • Lifetime updates
  • One-time fee, no annual payments!
  • 6 months outstanding support
  • Use on unlimited websites
Get it Now