Using Divi’s Fullwidth Menu Module vs Regular Menu Module

Posted on June 5, 2022 by in Divi Resources 3 Comments

Using Divi’s Fullwidth Menu Module vs Regular Menu Module
Blog / Divi Resources / Using Divi’s Fullwidth Menu Module vs Regular Menu Module

An often overlooked but essential part of any website is the navigation menu. Navigation is a key element in terms of creating a pleasing user experience. If done correctly, a menu can greatly improve the user experience and make it easy for your visitors to navigate through the website.

Divi comes with 2 different types of navigation modules; Fullwidth Menu and Regular Menu. In this article, we will discuss and demonstrate some of the differences between Divi’s fullwidth menu module and the regular menu module. If you’ve ever wondered which module to use for your website, hopefully this article will help you understand the key differences and use cases for these modules. We will also give you step-by-step instructions to customize the design of a fullwidth menu and a regular menu module.

Let’s get started!

Sneak Peek

Desktop: Fullwidth Menu Module

Divi Fullwidth vs Regular Menu Module Fullwidth Desktop

Desktop: Regular Menu Module

Divi Fullwidth vs Regular Menu Module Fullwidth Desktop

Mobile: Fullwidth Menu Module

Divi Fullwidth vs Regular Menu Module Fullwidth Mobile

Mobile: Regular Menu Module

Divi Fullwidth vs Regular Menu Module Mobile

Divi Fullwidth vs Regular Menu Module Mobile Expanded

Key Differences Between Divi’s Fullwidth Menu Module and Regular Menu Module

Here is an overview of the key differences between a fullwidth menu module and a regular menu module.

Regular vs Fullwidth Section Container

The fullwidth menu module requires a fullwidth section in Divi. Because the section is fullwidth, any module you add will take up the entire width of the page. Unlike the regular menu section, you cannot have multiple modules side-by-side. The fullwidth menu module is great if you want the menu to span the width of the page and don’t need any additional modules alongside it.

Divi Fullwidth vs Regular Menu Module Insert Fullwidth Module

The regular menu module requires a regular section in Divi. Regular sections have many different row layouts, and you can use any layout with the regular menu module. This allows you to include additional content alongside the menu using the other rows to create a more complex menu bar. Thanks to Divi’s many row options, you can easily create unique layouts for your menu bar using the regular menu module.

Divi Fullwidth vs Regular Menu Module Regular Row

Built-In Width Settings vs Editing the Row Container

The other key difference between the regular and fullwidth menus is that they have different ways to edit the width and spacing of the module.

The fullwidth menu module comes with some built-in settings to edit the width. You can make the menu text fullwidth with the “make menu links fullwidth” option. This extends the fullwidth menu module beyond the default content width.

Divi Fullwidth vs Regular Menu Module Fullwidth Menu Links

To achieve a similar look with a regular menu module, you would need to edit the containing row’s settings instead. For example, edit the width, max width, and alignment of the row containing the regular menu to extend the regular menu module beyond the default content width.

Divi Fullwidth vs Regular Menu Module Width Alignment Settings

Using Divi’s Fullwidth Menu Module vs Regular Menu Module

What You Need to Get Started

If you would like to follow along with this tutorial, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.

Now, you are ready to start!

Designing a Fullwidth Menu Module

Add a new page to your website and give it a title, then select the option to Use Divi Builder.

Divi Fullwidth vs Regular Menu Module New Page

For this tutorial we will build the design from scratch, so select the option to Start Building.

Divi Fullwidth vs Regular Menu Module Start Building

When you first create a blank page, it comes preloaded with a regular section. First add a fullwidth section below the regular section.

Then, delete the regular section from the page.

Divi Fullwidth vs Regular Menu Module Insert Fullwidth Section

Add a Fullwidth Menu module to the fullwidth row.

Divi Fullwidth vs Regular Menu Module Insert Fullwidth Menu

Add a background color to the fullwidth menu.

  • Background: #4e7560

Divi Fullwidth vs Regular Menu Module Add Background

Add a logo to the fullwidth menu.

Divi Fullwidth vs Regular Menu Module Add Logo

Next, navigate to the Menu Text options under the Design tab.

  • Menu Font: Poppins
  • Menu Text Color: #FFFFFF
  • Menu Text Size: 20px

Divi Fullwidth vs Regular Menu Module Fullwidth Font Settings

Next, navigate to the Dropdown Menu settings.

  • Dropdown Menu Background Color: #FFFFFF
  • Dropdown Menu Line Color: #7EAD70
  • Dropdown Menu Text Color: #000000

Divi Fullwidth vs Regular Menu Module Fullwidth Dropdown Settings

Set the Mobile Menu background and text color.

  • Mobile Menu Background Color: #FFFFFF
  • Mobile Menu Text Color: #000000

Divi Fullwidth vs Regular Menu Module Fullwidth Mobile Menu Settings

Next, change the Hamburger Menu settings.

  • Hamburger Menu Icon Color: #FFFFFF
  • Hamburger Menu Icon Font Size: 40px

Divi Fullwidth vs Regular Menu Module Fullwidth Hamburger Menu Settings

Finally, add some top and bottom padding.

  • Padding-Top: 10px
  • Padding-Bottom: 10px

Divi Fullwidth vs Regular Menu Module Fullwidth Add Padding

Now your fullwidth menu module is complete!

Designing a Regular Menu Module

Add a new page to your website and give it a title, then select the option to Use Divi Builder.

Divi Fullwidth vs Regular Menu Module Regular Use Builder

Select Start Building to build from scratch.

Divi Fullwidth vs Regular Menu Module Regular Start Building

The page comes preloaded with an empty regular section. To this section, add a background color.

  • Background: #4e7560

Divi Fullwidth vs Regular Menu Module Regular Add Background

Next, remove the top and bottom padding.

  • Padding-Top: 0px
  • Padding-Bottom: 0px

Divi Fullwidth vs Regular Menu Module Regular Remove Padding

Add a new row with the layout shown below.

Divi Fullwidth vs Regular Menu Module Regular Insert Row

In the row settings, equalize the column heights.

  • Equalize Column Heights: Yes

Divi Fullwidth vs Regular Menu Module Regular Equalize Column Heights

In the Main Element CSS settings under the Advanced tab, add the following custom CSS.

 align-items:center; 

Divi Fullwidth vs Regular Menu Module Regular Custom CSS

Add a text module to the leftmost column. We will use this to display the website name instead of uploading a logo. This is a unique advantage of the regular menu module because you can use it alongside other modules to add extra elements to the menu bar.

  • H1 Text: “Divi Blog”

Divi Fullwidth vs Regular Menu Module Regular Add Text

Set the Text Alignment to left on desktop.

  • Text Alignment-Desktop: Left

Divi Fullwidth vs Regular Menu Module Regular Text Alignment

Set the Text Alignment to center on tablet and mobile.

  • Text Alignment-Tablet: Center
  • Text Alignment-Mobile: Center

Divi Fullwidth vs Regular Menu Module Regular Mobile Alignment

Next, navigate to the heading text settings.

  • Heading Font: Poppins
  • Heading Font Weight: Bold
  • Heading Text Color: #FFFFFF
  • Heading Text Size: 40px

Divi Fullwidth vs Regular Menu Module Regular Menu Heading Font

Now that the “Divi Blog” title is done, let’s add the regular menu module to the center column.

Divi Fullwidth vs Regular Menu Module Regular Menu Add Menu

Remove the background color.

  • Background: None

Divi Fullwidth vs Regular Menu Module Regular Menu Remove Background

Next, navigate to the design tab. Under Layout, change the style to Centered.

  • Style: Centered

Divi Fullwidth vs Regular Menu Module Regular Menu Layout

Now we can modify the menu text styles.

  • Menu Font: Poppins
  • Menu Text Color: #FFFFFF
  • Menu Text Size: 20px

Divi Fullwidth vs Regular Menu Module Regular Menu Font Settings

Modify the dropdown menu styles as well.

  • Dropdown Menu Line Color: #7EAD70
  • Dropdown Menu Text Color: #000000

Divi Fullwidth vs Regular Menu Module Regular Menu Dropdown Settings

Next, change the mobile menu settings.

  • Mobile Menu Background Color: #FFFFFF
  • Mobile Menu Text Color: #000000

Divi Fullwidth vs Regular Menu Module Regular Menu Mobile Settings

Finally, modify the hamburger menu settings.

  • Hamburger Menu Icon Color: #FFFFFF
  • Hamburger Menu Icon Font Size: 40px

Divi Fullwidth vs Regular Menu Module Regular Menu Hamburger Icon Settings

This completes the styling of the regular menu module. To finish up the menu design, let’s add a call-to-action button to the right column. First, add the button module.

Divi Fullwidth vs Regular Menu Module Regular Menu Add Button

Change the button text.

  • Button: “Free 30 Day Trial”

Divi Fullwidth vs Regular Menu Module Regular Menu Button Text

Set the button alignment to center.

  • Button Alignment: Center

Divi Fullwidth vs Regular Menu Module Regular Menu Button Alignment

Set “Use Custom Styles for Button” to Yes and modify the text color.

  • Use Custom Styles for Button: Yes
  • Button Text Color: #FFFFFF

Divi Fullwidth vs Regular Menu Module Regular Menu Button Custom Styles

Set the button background.

  • Button Background: #7EAD70

Divi Fullwidth vs Regular Menu Module Regular Menu Button Background

Set the button background on hover to orange.

  • Button Background on Hover: #D19929

Divi Fullwidth vs Regular Menu Module Regular Menu Hover Background

Next, set the button border width, radius, and font.

  • Button Border Width: 0px
  • Button Border Radius: 40px
  • Button Font: Poppins

Divi Fullwidth vs Regular Menu Module Regular Menu Button Border Font

Finally, set the left and right padding.

  • Padding-Left: 30px
  • Padding-Right:30px

Divi Fullwidth vs Regular Menu Module Regular Menu Button Padding

Final Result

Now let’s take a look at the final result for our menu modules.

Desktop: Fullwidth Menu Module

Divi Fullwidth vs Regular Menu Module Fullwidth Desktop

Desktop: Regular Menu Module

Divi Fullwidth vs Regular Menu Module Regular Menu Desktop

Mobile: Fullwidth Menu Module

Divi Fullwidth vs Regular Menu Module Fullwidth Mobile

Mobile: Regular Menu Module

Divi Fullwidth vs Regular Menu Module Mobile Divi Fullwidth vs Regular Menu Module Mobile Expanded

Final Thoughts

Hopefully this article has helped you understand some of the key differences between Divi’s fullwidth menu module and regular menu module. Both are incredibly easy to customize to create great-looking menus for your website. The fullwidth menu module takes up the width of the page and comes with built-in options to modify and tweak the width. On the other hand, the regular menu module can be used alongside other modules and is contained within a row, where the width and other sizing options can be tweaked. Do you use a fullwidth menu module or a regular menu module on your website? We would love to hear from you in the comments!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Home Remodeling Layout Pack for Divi

Get a Free Home Remodeling Layout Pack for Divi

Posted on August 8, 2022 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new, free Divi Layout Pack from our design team to you. This time around, the design team has created a beautiful Home Remodeling Layout Pack that’ll help...

View Full Post

3 Comments

  1. i learned something good thank you

  2. Thank you for this post. Now i understand the difference much better an could improve our menu.

  3. I’m surprised content about the fullwidth modules would be posted here on the blog. The fullwidth modules are depreciated since about 5 years ago when the row settings came out. I assume they will be removed in the 5.0.

Join To Download Today