How to Create a Vertical Navigation Menu (or Header) for Your Divi Website

Posted on June 13, 2020 by in Divi Resources | 21 comments

How to Create a Vertical Navigation Menu (or Header) for Your Divi Website

Vertical navigation menus can come in handy for certain websites that need more menu items at the forefront. Horizontal menus can be difficult to fit all the menu links needed, especially on smaller browser widths. In this tutorial, we are going to show you how to build a custom vertical navigation menu using the Divi Theme Builder. This will allow you more room for showcasing your WordPress menu items. And you will have full power to add additional Divi Modules to the vertical header and design them with the Divi builder.

Let’s get started!

Sneak Peek

Here is a quick look at the design we’ll build in this tutorial.

divi vertical navigation menu and header

divi vertical navigation menu and header

divi vertical navigation menu and header

Download the Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

To upload the template, navigate to the Divi Theme Builder in the backend of your WordPress website.

header & footer template for Divi's Dietitian Layout Pack

Upload Global Default Website Template

Then, in the top right corner, you’ll see an icon with two arrows. Click on the icon.

header & footer template for Divi's Dietitian Layout Pack

Navigate to the import tab, upload the JSON file which you were able to download in this post, and click on ‘Import Divi Theme Builder Templates’.

header & footer template for Divi's Dietitian Layout Pack

Save Divi Theme Builder Changes

Once you’ve uploaded the file, you’ll notice a new global header and footer in your default website template. Save the Divi Theme Builder changes as soon as you want the template to be activated.

header & footer template for Divi's Dietitian Layout Pack

Let’s get to the tutorial, shall we?

Part 1: Building a New Global Header

For this tutorial, we are going to build the vertical navigation menu in a Global Header using the Divi Theme Builder.  However, we will show you how to add the same menu to the body of a page template at the end of the post, just in case you want to use it in addition to the main menu of your site.

To start, go to the WordPress Dashboard and navigate to Divi > Theme Builder.

Then click the “Add Global Header” area of the Default Website Template and select “Build Global Header” from the dropdown.

divi vertical navigation menu and header

Then select the option “Build from Scratch”.

divi vertical navigation menu and header

Part 2: Designing the Vertical Section Layout

Inside the Global Header Layout Editor, open the settings of the regular section already there and update the following.

  • Width (desktop): 300px
  • Width (tablet and phone): 100%
  • Height (desktop): 100vh
  • Height (tablet and phone): auto
  • Padding (desktop): 4vh top, 0px bottom
  • Padding (tablet and phone): 0px top, 0px bottom

divi vertical navigation menu and header

Continue the design by adding a box-shadow as follows:

  • Box Shadow: see screenshot
  • Box Shadow Vertical Position: 0px
  • Box Shadow Blur Strength: 20px
  • Box Shadow Spread Strength: -10px
  • Shadow Color: rgba(0,0,0,0.3)

divi vertical navigation menu and header

To make sure the vertical navigation menu stays visible on the left as the user scrolls, update the position to fixed and update the z index as follows:

  • Position: Fixed
  • Z Index: 9999

divi vertical navigation menu and header

To ensure that we will be able to see the submenu navigation that will extend outside the section, add the following custom CSS to the main element:

overflow: visible !important;

divi vertical navigation menu and header

Now your section is in a vertical layout on the left side of the template.

divi vertical navigation menu and header

Part 3: Designing the Vertical Menu

With the section in place, we are ready to design the vertical menu. To do this we will be using a menu module with some custom CSS to style the navigation to be displayed vertically.

We will also use the vh length unit so that the menu will scale nicely with different browser heights.

Adding the Row

To start, add a one-column row to the section.

divi vertical navigation menu and header

Then update the row settings as follows:

Size and Padding

  • Gutter Width: 1
  • Width: 100%
  • Max Width: 80%
  • Padding (desktop): 3vh top, 3vh bottom
  • Padding (tablet and phone):  0px top, 0px bottom

divi vertical navigation menu and header

Border

  • Border Width: 1px
  • Border Color: #eeeeee

divi vertical navigation menu and header

Adding the Menu Module

Inside the one-column row, add a new Menu Module.

divi vertical navigation menu and header

Select a menu to be displayed under the content toggle.

divi vertical navigation menu and header

Then add your Site Logo as dynamic content under the Logo toggle.

divi vertical navigation menu and header

Under the design tab, update the following:

  • Style: Centered
  • Menu Font: Nunito Sans
  • Menu Text Color: #535b7c
  • Menu Text Size: 18px (desktop), 14px (tablet and phone)
  • Menu Line Height: 2em
  • Dropdown Menu Line Color: #535b7c
  • Dropdown Menu Active Link Color: #535b7c

divi vertical navigation menu and header

  • Shopping Cart Icon Color: #535b7c
  • Search Icon Color: #535b7c
  • Hamburger Menu Icon Color: #535b7c

divi vertical navigation menu and header

  • Padding (desktop): 2vh top, 2vh bottom
  • Padding (desktop): 10px top, 10px bottom

divi vertical navigation menu and header

Part 4: Adding the Custom CSS for the Menu

The menu needs some custom CSS to get the vertical navigation we are looking to achieve. To start, go under the advanced tab and add the following custom CSS to the Menu Link and Menu Logo.

Menu Link CSS (desktop):

width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

Menu Link CSS (tablet):

width: auto;
border:none;

Menu Logo CSS:

margin-bottom: 20px;

divi vertical navigation menu and header

Next, add a custom CSS Class to the menu module as follows:

CSS Class: et-vert-menu

divi vertical navigation menu and header

The will be used to target this particular menu in our external custom CSS we will add using a code module.

Adding Custom CSS with Code Module

Under the menu module, add a new code module.

divi vertical navigation menu and header

Then paste the following code into the code box (be sure to place it between style tags):

/*Style Vertical Navigation Menu*/  
.et-vert-menu .et_pb_menu__menu>nav>ul {
  flex-direction: column;
  margin-left: 0px !important;
  margin-right: 0px !important;
  width: 100%;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
  margin: 10px 0 !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
  display:block !important;
  padding: 0px !important;
  }
  .et-vert-menu .et_pb_menu__menu>nav>ul ul {
    padding: 0px !important;
    top: 0px !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
  left:calc(100% - 1px) !important;
  top:0px !important;
  }
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
  content: "5" !important; /*change arrow icon for submenu*/
  right: 20px !important;
  }
.et-vert-menu .nav li ul {
    left: calc(100% - 1px) !important; /*align submenu to the right of menu link*/
  }
@media all and (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
    width: 100%; /*width of the vertical navigation menu*/
  }
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/  
#et-main-area { 
  width: calc(100% - 300px); 
  margin-left: 300px;
}
}

divi vertical navigation menu and header

Part 5: Designing the Button and Social Media Follow Icons

Now that the menu is complete, we can add a button and some social media follow links to complete the vertical header.

Adding the Row

Add a new one-column row under the current row.

divi vertical navigation menu and header

Adding the Button

Then add a new button module to the row.

divi vertical navigation menu and header

Update the button settings as follows:

  • Button Alignment: center
  • Button Text Size: 18px (desktop), 14px (tablet and phone)
  • Button Text Color: #ffffff
  • Button Background Color: #535b7c
  • Button Border Width: 0px

divi vertical navigation menu and header

Then go to the advanced tab and paste the following custom CSS to the Main Element:

Main Element CSS (desktop)

display:block;
width: 100%;

Main Element CSS (tablet)

display:inherit;

divi vertical navigation menu and header

Adding the Social Media Follow Icons

Under the button, add a Social Media Follow module.

divi vertical navigation menu and header

Add the Social Networks that you want under the content tab.

divi vertical navigation menu and header

Under the Design tab, update the following:

  • Module Alignment: Center
  • Icon Color: #535b7c

divi vertical navigation menu and headerThen open the settings of each of the networks and delete the background color.

divi vertical navigation menu and header

Then add a little top margin as follows:

  • Margin: 3vh top

divi vertical navigation menu and header

Update Row Settings

After the social media follow icons are complete, open the row settings and adjust the following:

  • Gutter Width: 1
  • Padding (desktop): 3vh top, 0px bottom
  • Padding (tablet and phone): 10px top

divi vertical navigation menu and header

Save Layout and Template

Once done, save the layout and the template.

divi vertical navigation menu and header

Final Result

Here is the final result on a live page.

divi vertical navigation menu and header

divi vertical navigation menu and header

divi vertical navigation menu and header

How to Add the Vertical Navigation Menu to the Body Area of a Page Template

If you want to add the vertical navigation menu to a page layout (instead of your global header), you must first save the section layout to the Divi Library.

To do this, open the Global Header Layout Editor and save the vertical section (containing the menu) to your Divi Library.

divi vertical navigation menu and header

Then exit the layout editor and create a new template and assign it to whatever page(s) you want. The click to build a custom body for the page template.

divi vertical navigation menu and header

Select to build it from scratch.

divi vertical navigation menu and header

Add a new fullwidth section to the layout.

divi vertical navigation menu and header

Then add a Fullwidth Post Content Module to the section.

divi vertical navigation menu and header

Delete the default regular section at the top of the page and then open the settings for the fullwidth section and add the following custom CSS to the Main Element:

Main Element CSS (desktop)

width: calc(100% - 300px);
margin-left:300px !important;

Main Element CSS (tablet)

width: 100%;

Under the regular section, click to add a new section and, under the Add From Library tab, select the vertical menu section you have previously saved to the library.

divi vertical navigation menu and header

Because we don’t want the section to show on mobile, open the section settings and disable the visibility of the section on tablet and phone.

divi vertical navigation menu and header

Then open the code module within the section layout and replace this code snippet…

#et-main-area { 
width: calc(100% - 300px); 
margin-left: 300px;
}

With this…

#main-header, #main-footer { 
width: calc(100% - 300px); 
margin-left: 300px;
}

divi vertical navigation menu and header

This will move the main header and footer over to fit the fixed vertical menu on the left of the page template. Here is what it looks like on a live page using Divi’s default header and footer.

divi vertical navigation menu and header

Final Thoughts

The vertical navigation menu featured here has been given a fixed position. However, if you need more room for additional menu items or content, you can change the position of the section to absolute. You could also change the vertical overflow to scroll in order to give the user the ability to scroll through the menu items (just note that you won’t be able to see/use submenus with this overflow setting).

The vertical section setup opens the door for creating some custom sidebars as well. I hope this comes in handy for future projects.

I look forward to hearing from you in the comments.

Cheers!

Premade Layouts

Check Out These Related Posts

21 Comments

  1. Thanks for the download. I love how much you can customize the menu. My concerns are the weight of the menu for load speed and how mobile friendly it is.

  2. i did it and tnx but is there any horizental one?

    • Not sure what you mean by this. Are you wanting to keep the horizontal menu and the vertical menu on desktop? If so, see the end of the article where I explain how to add the vertical menu to a page template. I hope that helps.

  3. Hey Jason! Useful and inspiring! Thank you!

  4. Thanks, nice tutorial, but this amount of customization did not play well in the past. I am sure something will break badly with future updates.

    It would be really appreciated, if Divi developers would add Layout > Style > Vertical option with options to choose between roll-out and accordion styled menus. Collapsing accordion style menus provide better UX and are really well usable on mobile devices, especially with larger menus that don’t fit into horizontal fancy modern designs.

    • Yes, I agree Canagon, a good vertical menu with Collapsing accordion style menus. I had to buy a plugin to achieve results. This has got to be a built in feature.

    • Agreed! Especially since this is possible using the old way of doing headers in the WP customiser.

  5. Awesome! Love it! Thanks a bunch!

    • You are very welcome, Elisandro. Always good to hear from you.

  6. Also I forgot to say, Nice work Jason! This teaches me so much

  7. Wow amazing

  8. Wow its nice Article

  9. Thank you so much for posting this. Saved me a lot of time customizing it.

  10. Rad post, very thorough. Do you know if this is possible to customize the ‘slide-in’ menu like this?

  11. Thanks for this tutorial – I have had great success with it on Desktop. On Mobile and tablet though, it takes up a lot of the room of the screen, and the top of each page is behind the menu. Is there a way to a) reduce the height of the mobile/tablet menu and b) have the page butt up against the menu, rather than it sit behind it?

  12. You would expect this to be a one or 2 clicks in Divi to create any vertical menu and flexible control for style and responsiveness in the design settings.

Join To Download Today

Pin It on Pinterest