Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

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.

step1

  1. Select Create New Menu
  2. Give the menu a name such as Second Menu
  3. Select the page links you want on this menu
  4. Click “Add To Menu”
  5. 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

step2

 

Create a Fullwidth Header Section

The next step will be to add the Fullwidth Header Module to the page.

  1. Add Fullwidth Section.
  2. Insert Fullwidth Module.
  3. Select the Custom Menu that you just created.
  4. Give the Module a custom CSS ID. I used the ID secondheader for my example

So my page now looks like this…

step3

 

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.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2018 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest