The Divi Fullwidth Menu Module allows you to place a full-width navigation menu anywhere on your page. It provides secondary navigation to enhance usability and effectively guide visitors through your content.
Add The Divi Fullwidth Menu Module
When you load the Visual Builder, Divi automatically adds a Section.
Click on the Blue Plus
icon to insert a Fullwidth section.Click on the Fullwidth button.
Find the Fullwidth Menu module and click on it to load the module.
The module library is also searchable. To access it, type the module name you want in the search bar at the top.
{Gif here}
The Divi Fullwidth Menu Module Use Cases
Creating Custom Headers: Use the Fullwidth Menu Module to design a unique navigation bar that aligns with your brand's aesthetic, replacing the default WordPress menu.
Adding Secondary Menus: Implement the module to display secondary navigation for specific pages, like a services menu or a quick link section in a sidebar.
Designing Footer Navigation: Use the Fullwidth Menu Module in your footer to offer quick access to essential pages, such as privacy policies, contact information, or FAQs.
Fullwidth Menu Module Settings Breakdown
Once you've added the Fullwidth Menu module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
The Content tab allows you to select the WordPress menu to display, set the logo image, choose which elements to show, and more.
Content - Choose the WordPress menu to be displayed.
Logo - Choose the logo image to be displayed by the Fullwidth Menu module.
Elements - Choose to display or hide the Shopping cart (the WooCommerce plugin needs to be installed) and the Search Icon.
Link - Make the entire Fullwidth Menu module clickable, creating a seamless way to direct users to another page, section, or external site.
Background - Choose the Fullwidth Menu module's background styles.
Admin Label - Choose the Fullwidth Menu module's label text to assist you in keeping things organized and easy to understand in the Visual Builder.
The Design tab
All the design styles and options for the Fullwidth Menu module are in this tab.
Layout - Choose the style and the Dropdown Menu Direction.
Menu Text - Choose the text styles for the Fullwidth Menu module.
Dropdown Menu - Choose the Fullwidth Menu line color, dropdown text color, active link color, mobile menu's background colors, and more.
Icons - Choose the text color and font size for the Shopping cart, Search, and Hamburger menu icons.
Logo - Choose design options for the Logo image, such as border-radius, border styles, box shadow, and image filters.
Sizing - Choose the Fullwidth Menu module's sizing.
Spacing - Choose the Fullwidth Menu module's spacing.
Border - Choose the Fullwidth Menu module's border styles.
Box Shadow - Choose the Fullwidth Menu module's Box Shadow styles.
Filters - Choose the Fullwidth Menu module's filters such as hue shifts, saturation changes, and blending modes.
Transform - Choose the advanced design effects of the Fullwidth Menu module, such as scaling, rotating, skewing, and translating.
Animation - Choose the Fullwidth Menu module's animation styles.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
CSS ID & Classes - Allows you to assign unique CSS ID or reusable CSS classes, enabling advanced custom styling through your child theme’s stylesheet or Divi’s custom CSS settings.
Custom CSS - Allows you to add custom CSS code to fine-tune your Fullwidth Menu module, enabling advanced styling that perfectly aligns with your vision.
Attributes - Set the Alt Text for the logo image.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Visibility - Choose the Fullwidth Menu's module visibility based on different devices.
Transitions - Choose how long Fullwidth Menu's module animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Fullwidth Menu's module placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Fullwidth Menu module behaves and transforms during scrolling.
What's the next step?
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
