** UPDATE – 4/2/20

The Divi Theme Builder has arrived and we’ve tested it out…

We’ve built a new header menu effect using the theme builder. 

Building a custom Divi menu takes more skill than simply dragging things in to place. This will change soon (See Theme Builder Sneek Peak). As of today, we will still have to add a little CSS to create a custom divi menu.

In today’s tutorial we show you:

  • how to build a custom menu that stands out from the basic Divi menu.
  • the code to drop into Divi Theme Options.
  • where to place this code.
  • bring it all comes together.

You will find a free download of the Divi Theme options .json file below. This will allow you to import the code directly into Divi Theme Options. If you aren’t sure how to use the .json file, learn how to master the Divi import/export tool.

Let’s Get Started

Copy the code below into Divi -> Theme Options -> Custom CSS

Listen to the Divi Addicts Podcast Today

Get Our Free Website Starter PDF

Related Posts

Build A Custom Divi Menu – 2020

Build A Custom Divi Menu – 2020

We discuss how to custom code a unique menu using the Divi Wordpress Theme. Follow along and you will have a unique menu in minutes.

Join the conversation


  1. miro jovanovic

    Hi, is there a way to achieve, that in first row we place logo – on the left, and on the right, in two columns phone number and addresses, and in the second row our main menu.

    Thanks for the video, it looks very professional.

    • klm

      Hey Miro! Thanks for the comment! I’m not sure I fully understand what you are trying to achieve on your menu.

      Are you saying in the logo be in the center of the blue top menu with the phone number on the left of the menu and the address on the right. Then have the main menu split into two columns?

      Sorry I don’t fully understand, but am happy to try and help you reach the menu you are trying to create.

      • miro jovanovic

        Like i want to achieve to have to menu bars, one in his own row.
        In first row i would like to have 4 columns, and put logo and some other things over here, and
        below that,
        second row, with actual main menu bar with menu items.

        Hopefully I was litlle bit more clear :()

        • klm

          hey Miro, you can achieve that in a few different ways. Their are a couple plugins you can use.
          1. Page Builder Everywhere – https://aspengrovestudios.com/product/page-builder-everywhere/
          2. Mhmm – https://besuperfly.com/product/mhmm-mighty-header-and-menu-maker/

          Both of these would allow you to design the layout you want in the visual builder, then save it to the Divi Library and finally inject it into your design above your page content. This would allow you to get the results you are looking for with the customization you want.

          I do know that Elegant Themes has been working on the Theme Builder since earlier in 2018. I don’t know when it will officially launch, but i’d assume it will be coming out sooner than later. The theme builder should give you the same abilities without having to purchase an additional plugin. The perk of the plugins is that they are available and work as of today.

          I hope that helps!

  2. Tarig

    Hi Keegan,

    How can i add the scroll option only to the menu box not to the hole browser page in case the menu list is huge.

    Thanks in advance.

    • klm

      the .sub-menu class would need a set height added and overflow set to scroll.



Submit a Comment

Your email address will not be published. Required fields are marked *