The main menu bar makes navigating for guests seamless. Excluding the default number one menu bar we’re used to in WordPress, you’ve more than likely come around the Fullwidth Menu Module that Divi gives as smartly. Normally, it’s used to show different menus in your web site which might be other from the main menu you will have on the best of each and every web page.

However you’ll be able to additionally simply use the Fullwidth Menu Module to interchange your number one menu bar. This offers you the liberty of putting the menu anyplace you need at the web page with out coping with a reproduction menu on the best of your web page. You’ll additionally use Divi’s integrated choices to taste the menu the best way you need to, that means you’ll be able to create shocking effects the usage of the border and divider choices, for example.

On this educational, we’ll display you learn how to exchange your number one menu bar with the Fullwidth Menu Module the usage of Divi’s Wood worker Structure Pack. This is a part of our ongoing Divi design initiative. You’ll make a selection whether or not you need to make this technique follow to all pages or only some of them. Let’s get to it!

Preview

Earlier than we dive into the use case educational, let’s take a handy guide a rough have a look at the result on other display screen sizes.

carpenter

Disable Mounted Navigation Bar

Move to Divi’s Theme Choices

The very first thing we’ll want to do is disable the mounted navigation possibility in Divi’s theme choices. We’re doing this to eliminate the main menu area on the best of our web page. To do this, cross in your WordPress Dashboard > Divi > Theme Choices.

fullwidth menu module

Disable Mounted Navigation Bar

Open the overall tab and disable the Mounted Navigation Bar possibility.

fullwidth menu module

Create Number one Menu

Move to Menus

The following factor we’re going to do is create our number one menu. We’ll use this number one menu for each the default Number one Menu Bar on the best and the Fullwidth Menu Module. So as to add your menu, cross in your WordPress Dashboard > Look > Menus.

fullwidth menu module

Upload New Number one Menu

Upload a brand new menu, give your menu a reputation and make it your Number one Menu.

fullwidth menu module

Upload Pages & Save Menu

Ultimate however now not least, upload your whole pages and save your menu.

fullwidth menu module

Taste Number one Menu Bar in Theme Customizer

Move to Theme Customizer

Relying on if you wish to cover the default number one menu bar on all pages or now not, chances are you’ll wish to taste the default Number one Menu Bar first. You best want to do that when you’re making plans on the usage of it on some pages. If you wish to take away the Number one Menu Bar in every single place, you’ll be able to skip this step.

fullwidth menu module

Number one Menu Bar Settings

To compare the format pack, we’ve implemented the next adjustments:

  • Font Taste: Daring & Uppercase
  • Textual content Colour: #FFFFFF
  • Energetic Hyperlink Colour: #FFFFFF
  • Background Colour: #f25b3a
  • Dropdown Menu Background Colour: #f25b3a

fullwidth menu module

Conceal Number one Menu Bar

One Web page

Move to Web page of Selection & Allow Visible Builder

To cover the Number one Menu Bar on the best of our pages, we’ll want to use a bit of quantity of CSS code. Be aware that it’s essential to have disabled the Mounted Navigation Bar possibility (probably the most earlier steps). Another way, the gap this is taken up by means of the Number one Menu Bar shall be white and now not totally long gone. In case you’re going to cover the Number one Menu Bar on one web page, particularly, cross to that web page and permit the Visible Builder.

fullwidth menu module

Open Web page Settings

Open the web page settings subsequent by means of clicking at the following icon on the backside of your web page:

fullwidth menu module

Upload CSS Code

Transfer over to the Complicated tab and upload the next CSS code to the Customized CSS field:

#main-header {
show: none;
}

fullwidth menu module

Whole Website online

Move to Divi’s Theme Choices

If you wish to eliminate the Number one Menu Bar on your whole web site, you’ll be able to do this as smartly. You don’t have so as to add the code to each and every web page manually. As a substitute, you’ll be able to simply cross in your WordPress Dashboard > Divi > Theme Choices.

fullwidth menu module

Upload CSS Code

Proceed by means of scrolling down till you come back around the Customized CSS field and upload the similar CSS code there:

#main-header {
show: none;
}

fullwidth menu module

Upload Number one Menu Bar to Web page

Open Touchdown Web page with Visible Builder

Now that we concealed the Number one Menu Bar, we will get started including the Fullwidth Menu Module to our web page. To do this, cross in your touchdown web page, for example, and permit the Visible Builder.

fullwidth menu module

Upload Fullwidth Segment

Proceed by means of including a Fullwidth phase proper underneath your hero phase.

fullwidth menu module

Most sensible Border

You’ll use all Divi’s integrated choices to create the precise design you need. We’re going to stay it lovely blank. The one factor we’ll upload to our phase choices is a best border:

  • Most sensible Border Width: 7px
  • Most sensible Border Colour: #f25b3a

fullwidth menu module

Upload Fullwidth Menu Module

Subsequent, upload the Fullwidth Menu Module in your phase.

fullwidth menu module

Make a selection Number one Menu

Make a selection your number one menu because the menu you need to turn up.

fullwidth menu module

Background Colour

Proceed by means of giving your module a black background colour.

fullwidth menu module

Hyperlinks Settings

Then, open the Hyperlinks settings and follow the next adjustments:

  • Energetic Hyperlink Colour: #FFFFFF
  • Dropdown Menu Textual content Colour: #FFFFFF
  • Cellular Menu Textual content Colour: #FFFFFF
  • Textual content Orientation: Left
  • Textual content Colour: Gentle

fullwidth menu module

Dropdown Menu Settings

Trade the Dropdown Menu settings subsequent:

  • Dropdown Menu Background Colour: #000000
  • Dropdown Menu Line Colour: #000000
  • Cellular Menu Background Colour: #000000

fullwidth menu module

Menu Textual content Settings

Finally, we’re going to make the textual content settings fit the format pack:

  • Menu Font Weight: Extremely Daring
  • Menu Font Taste: Uppercase

fullwidth menu module

Make Fullwidth Segment International & Use on Different Pages as Neatly

Save as International Segment

We’re executed developing our new number one menu! In case you’re making plans on the usage of it on different pages as smartly, cross forward and upload it in your Divi Library as a world merchandise.

fullwidth menu module

Upload to Different Pages With out Number one Menu Bar

You’ll now simply upload this Fullwidth Menu to different pages. You’ll make a selection its place and also you’re loose to mess around with the integrated design choices that come together with it!

fullwidth menu module

Preview

Now that we’ve long gone via all steps, let’s take a last have a look at the outcome on other display screen sizes.

carpenter

Ultimate Ideas

On this use case weblog submit, we’ve proven you learn how to exchange the Number one Menu Bar on the best of your pages with the Fullwidth Menu Module. Making use of this technique offers you the liberty of having the ability to position your menu anyplace you need in your web page. On best of that, you’ll be able to additionally use Divi’s integrated choices to taste it. If in case you have any questions or tips, remember to go away a remark within the remark phase underneath.

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

WordPress Web Design

[ continue ]