Divi has several site-wide header options including Vertical Navigation, which will move your logo and primary menu from the default horizontal and top position to a vertical and left-aligned position. However, changing the header format will apply the change to every page on your Divi site.

With a few minor tweaks, you can easily designate a vertical menu to specific pages without affecting the rest of your site. You can also use a different menu for your vertical menu pages. This can be great for membership pages, documentation, or any page you simply prefer to have a vertical menu.

Here’s the demo.

PHP

The first thing you’ll want to do is copy the header.php file from the parent Divi theme folder to your child theme and rename it to header-vertical-menu.php. If you prefer to use a different name, it’s important to note that it MUST begin with “header-“.

Next we will modify the body_class function in the new file. Replace the following code near the top of the new file:

With the code below:

If you want to add more classes here, you can add them after et_vertical_nav in the $vertical_menu_class variable. This class is what tells Divi to display the menu in the vertical position.

Next we need load our custom menu. This is optional. If you simply want to load your site’s primary nav but in a vertical header, skip this step and move onto creating a page template in the last step below.

To load a custom menu, first you need to log into your WordPress dashboard and go to Appearance -> Menus -> create a new menu. Give the menu a name and add your menu items. For this example, I named the menu “Vertical Menu”.

In the same header-vertical-menu.php file, we need to tell Divi to load our new menu. Find the following line of code in this file:

And replace it with this:

Depending on the version of Divi you have, there may be two instances of this line. Replace both.

Here we simply changed “theme_location” to “menu” and “primary-menu” to “Vertical Menu”. If you used a different name for your custom menu, replace “primary-menu” with your menu name. We are done with this file. You can save it and close it.

The last step is to create a page template that will load our custom header file we created above.

Copy the page.php file from the parent Divi theme folder to your child theme folder and rename it vertical-menu-template.php. Replace the first two lines of code in this file with the following:

In the code above, we are declaring this page as a template file called Vertical Menu. When you edit or create a new page in Divi, this new template will become available under the Template dropdown option along with Default Template and Blank Page (default templates in Divi).

We also modified the get_header function in the code above to retrieve our new vertical menu header. If you named your custom header file to something other than header-vertical-menu.php, you’ll need to change the code above to reflect that. Just make sure you leave out the “header-” in the get_header function. This is assumed.

That’s it! To change any page from the default horizontal header to a vertical header, just select the “Vertical Menu” page template when creating or editing that page. The template will add the “et_vertical_nav” class to the body and load the custom menu on that page. You can create as many custom headers and templates as you need for multiple vertical menu options for different pages in Divi.