There are so many ways to be creative with menus in Divi. By default, Divi gives you the option to have two menus on the top of the page and one. But it also has a full Width Menu module as part of its Page Builder function.
So in this case, I needed to create a menu just above the home page slider and just under the Full Width Header that I use on each page.
Create Custom Menu
To do this, I had to start by creating a custom menu. Go to Appearance>Menus.
- Select Create New Menu
- Give the menu a name such as Second Menu
- Select the page links you want on this menu
- Click “Add To Menu”
- Rearrange links in the order you want them by dragging them up, down or even to the right if you want to make them sub-menu links
Create a Fullwidth Header Section
The next step will be to add the Fullwidth Header Module to the page.
- Add Fullwidth Section.
- Insert Fullwidth Module.
- Select the Custom Menu that you just created.
- Give the Module a custom CSS ID. I used the ID secondheader for my example
So my page now looks like this…
Style It
Now if you want to customize it a little without changing the main menu on the top of the page, you can do so using the custom ID you gave it in the previous step. The following code is what I used to modify it’s color scheme and to add the border on top of each page.
/*Second Menu*/
#secondmenu li > a {color: #000; font-size:15px; border-top: 1px solid #9e9e9e;}
#secondmenu a:hover {color:#ff431c; border-top: 1px solid #ff431c;}
And that’s it. Of course you can do much more with the styling and the placements of the menus if you like. This is just the tip of the iceberg. To view this in action, check out this site I created in Divi http://novindevelopment.com/
Well that’s all for now. I hope you find this article useful.
Found your site searching for a way to change the size of a secondary menu that was above the main menu. Great write-up. This gave me another idea on how to layout menus.
Hi Geno,
You are amazing you know that!!
I have been running around for this issue everywhere but no one seems to help and I have a very angry client who needs this fixed asap. I was hoping you would be my savior!!
I have added a full-width menu to the homepage and i didnt realize that when i showed it to the client that the rest of the pages wont have the menu. The client loved the look!! Is there any way I can force the full-width menu on all the pages using the functions.php file or something? Any direction AT ALL will be much appreciated!!
I have the same issue. But i can’t to solve this. I would apreciate some help! Tks anyway
The best way to do this is just save it as a Global Module and then add it on each page. That way when you update it, it updates each page automatically.
Hello, I would like to ask you how to make a one page menu, yet make sure that the one active many is highlited…thanks!
HI Carlos. I sent you an email. If you are part of the Divi Theme Help & Share Group, you can find a possible solution here on this post although I have not tried it yet. https://www.facebook.com/groups/DiviHelpAndShare/permalink/867674616657183/
Is it possible to move the secondary menu to the bottom of your website above the footer? Client request…
Yes you can. In this tutorial I show you how to add sections you can save to the library and add them to your footer.php page. You can replace the footer all together and just add page builder sections to the footer either above or below. This tutorial should point you in the right directions. https://quiroz.co/replace-the-default-footer-with-a-divi-builder-footer-saved-in-your-divi-library/
Hi,
i’ve just tried this and have had no luck. I named the module secondmenu and the wrote the css as per your instructions. Is it the overall full width section i give the class to or the menu module within the section?
You give the Module a Custom ID. Make sure you are using the ID box and not the class box.
I think a better way to accomplish this (and what I ultimately did):
Create your Full Width Menu. Save it as a Global Module (as Geno stated).
Then, use a bit of php code in your functions.php to set up a custom shortcode that inserts a saved divi module.
Copy paste the main templates from your regular theme into your child theme folder. Edit each one to add this php custom shortcode at the top of each page (below header stuff).
Open your styles.css and use selectors to hide all divi menus.
Now on every page created (that isn’t blank) and all templated pages that are hard to change (think category archives, standard blog page, etc) the menu is exactly as your fullwidthmenu module.
Then of course when you do a blank page you insert the global fullwidthmenu module. Now any changes made to the menu module will propogate to all pages of your website, templated or not.
Is there any chance that you can point me out the selector to get rid of the white gutter between the menu items ?
What white gutter are you speaking of?
Hi geno,
I want to create double layer menu as you have in your website. Is there any script I can follow to add it in my website.
You would have to modify the header.php by adding a shortcode that injects a section that you have in the divi library. It is a bit complicated and would require a seperate tutorial but this tutorial would give you an idea. https://quiroz.co/header-section-fullwidth-category-menu-top-single-post-pages/
Try adding this css and then just change the color.
@media only screen and (max-width: 980px){ .mobile_nav.opened .mobile_menu_bar:before { color: #fff!important;}}hi,
i am using the fullwidth menu module to add a non primary menu. it works in the desktop screen perfectly but in a mobile it shows the hamburger icon and does not display the menu when clicked it just have an empty anchor.
How can i make it work on mobiles?
Thank you
Sounds like some type of conflict. Try disabling your plugins and then activate them one by one to see if it is a plugin conflict.