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.
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.
Disable Mounted Navigation Bar
Open the overall tab and disable the Mounted Navigation Bar possibility.
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.
Upload New Number one Menu
Upload a brand new menu, give your menu a reputation and make it your Number one Menu.
Upload Pages & Save Menu
Ultimate however now not least, upload your whole pages and save your menu.
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.
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
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.
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:
Upload CSS Code
Transfer over to the Complicated tab and upload the next CSS code to the Customized CSS field:
#main-header {
show: none;
}
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.
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;
}
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.
Upload Fullwidth Segment
Proceed by means of including a Fullwidth phase proper underneath your hero phase.
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
Upload Fullwidth Menu Module
Subsequent, upload the Fullwidth Menu Module in your phase.
Make a selection Number one Menu
Make a selection your number one menu because the menu you need to turn up.
Background Colour
Proceed by means of giving your module a black background colour.
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
Dropdown Menu Settings
Trade the Dropdown Menu settings subsequent:
- Dropdown Menu Background Colour: #000000
- Dropdown Menu Line Colour: #000000
- Cellular Menu Background Colour: #000000
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
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.
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!
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.
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