The primary menu bar makes navigating for visitors seamless. Apart from the default primary menu bar we’re used to in WordPress, you’ve probably come across the Fullwidth Menu Module that Divi offers as well. Usually, it is used to display other menus on your website that are different from the primary menu you have at the top of each page.

But you can also easily use the Fullwidth Menu Module to replace your primary menu bar. This gives you the freedom of placing the menu wherever you want on the page without dealing with a duplicate menu at the top of your page. You can also use Divi’s built-in options to style the menu the way you want to, meaning you can create stunning results using the border and divider options, for instance.

In this tutorial, we’ll show you how to replace your primary menu bar with the Fullwidth Menu Module using Divi’s Carpenter Layout Pack. This is part of our ongoing Divi design initiative. You can choose whether you want to make this method apply to all pages or just a few of them. Let’s get to it!

Preview

Before we dive into the use case tutorial, let’s take a quick look at the end result on different screen sizes.

carpenter

Disable Fixed Navigation Bar

Go to Divi’s Theme Options

The first thing we’ll need to do is disable the fixed navigation option in Divi’s theme options. We’re doing this to get rid of the primary menu space at the top of our page. To do that, go to your WordPress Dashboard > Divi > Theme Options.

fullwidth menu module

Disable Fixed Navigation Bar

Open the general tab and disable the Fixed Navigation Bar option.

fullwidth menu module

Create Primary Menu

Go to Menus

The next thing we’re going to do is create our primary menu. We’ll use this primary menu for both the default Primary Menu Bar at the top and the Fullwidth Menu Module. To add your menu, go to your WordPress Dashboard > Appearance > Menus.

fullwidth menu module

Add New Primary Menu

Add a new menu, give your menu a name and make it your Primary Menu.

fullwidth menu module

Add Pages & Save Menu

Last but not least, add all of your pages and save your menu.

fullwidth menu module

Style Primary Menu Bar in Theme Customizer

Go to Theme Customizer

Depending on if you want to hide the default primary menu bar on all pages or not, you might want to style the default Primary Menu Bar first. You only need to do this if you’re planning on using it on some pages. If you want to remove the Primary Menu Bar everywhere, you can skip this step.

fullwidth menu module

Primary Menu Bar Settings

To match the layout pack, we’ve applied the following changes:

  • Font Style: Bold & Uppercase
  • Text Color: #FFFFFF
  • Active Link Color: #FFFFFF
  • Background Color: #f25b3a
  • Dropdown Menu Background Color: #f25b3a

fullwidth menu module

Hide Primary Menu Bar

One Page

Go to Page of Choice & Enable Visual Builder

To hide the Primary Menu Bar at the top of our pages, we’ll need to use a little amount of CSS code. Note that it’s important to have disabled the Fixed Navigation Bar option (one of the previous steps). Otherwise, the space that is taken up by the Primary Menu Bar will be white and not completely gone. If you’re going to hide the Primary Menu Bar on one page, in particular, go to that page and enable the Visual Builder.

fullwidth menu module

Open Page Settings

Open the page settings next by clicking on the following icon at the bottom of your page:

fullwidth menu module

Add CSS Code

Switch over to the Advanced tab and add the following CSS code to the Custom CSS box:

#main-header {
display: none;
}

fullwidth menu module

Entire Website

Go to Divi’s Theme Options

If you want to get rid of the Primary Menu Bar on your entire website, you can do that as well. You don’t have to add the code to each page manually. Instead, you can just go to your WordPress Dashboard > Divi > Theme Options.

fullwidth menu module

Add CSS Code

Continue by scrolling down until you come across the Custom CSS box and add the same CSS code there:

#main-header {
display: none;
}

fullwidth menu module

Add Primary Menu Bar to Page

Open Landing Page with Visual Builder

Now that we hid the Primary Menu Bar, we can start adding the Fullwidth Menu Module to our page. To do that, go to your landing page, for instance, and enable the Visual Builder.

fullwidth menu module

Add Fullwidth Section

Continue by adding a Fullwidth section right below your hero section.

fullwidth menu module

Top Border

You can use all Divi’s built-in options to create the exact design you want. We’re going to keep it pretty clean. The only thing we’ll add to our section options is a top border:

  • Top Border Width: 7px
  • Top Border Color: #f25b3a

fullwidth menu module

Add Fullwidth Menu Module

Next, add the Fullwidth Menu Module to your section.

fullwidth menu module

Select Primary Menu

Select your primary menu as the menu you want to show up.

fullwidth menu module

Background Color

Continue by giving your module a black background color.

fullwidth menu module

Links Settings

Then, open the Links settings and apply the following changes:

  • Active Link Color: #FFFFFF
  • Dropdown Menu Text Color: #FFFFFF
  • Mobile Menu Text Color: #FFFFFF
  • Text Orientation: Left
  • Text Color: Light

fullwidth menu module

Dropdown Menu Settings

Change the Dropdown Menu settings next:

  • Dropdown Menu Background Color: #000000
  • Dropdown Menu Line Color: #000000
  • Mobile Menu Background Color: #000000

fullwidth menu module

Menu Text Settings

Lastly, we’re going to make the text settings match the layout pack:

  • Menu Font Weight: Ultra Bold
  • Menu Font Style: Uppercase

fullwidth menu module

Make Fullwidth Section Global & Use on Other Pages as Well

Save as Global Section

We’re done creating our new primary menu! If you’re planning on using it on other pages as well, go ahead and add it to your Divi Library as a global item.

fullwidth menu module

Add to Other Pages Without Primary Menu Bar

You can now easily add this Fullwidth Menu to other pages. You can choose its position and you’re free to play around with the built-in design options that come along with it!

fullwidth menu module

Preview

Now that we’ve gone through all steps, let’s take a final look at the result on different screen sizes.

carpenter

Final Thoughts

In this use case blog post, we’ve shown you how to replace the Primary Menu Bar at the top of your pages with the Fullwidth Menu Module. Applying this method gives you the freedom of being able to place your menu wherever you want on your page. On top of that, you can also use Divi’s built-in options to style it. If you have any questions or suggestions, make sure you leave a comment in the comment section below.

The post How to Replace the Primary Menu Bar with Divi’s Fullwidth Menu Module appeared first on Elegant Themes Blog.

Subscribe to Get News, Updates and Advice!

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Share This