Vertical Navigation Menu or Header in Divi – How to Guide

by | Oct 29, 2024 | Blogging, Tips & Tricks, Tutorials | 0 comments

Affiliate Disclosure: Some of the links in this post are affiliate links, which means we may earn a commission if you click through and make a purchase. For more details, please read our Affiliate Disclosure Policy.

Want to create a vertical header menu that appears on the sidebar of your website for a unique view, you’re in the right place! Designing a vertical navigation menu or header in your Divi website can significantly enhance its usability and aesthetic appeal. This step-by-step guide will walk you through the process of setting up a vertical header, including how to insert a menu, customize its appearance, and ensure it’s responsive across various devices. By the end of this tutorial, you’ll have a stylish vertical header that not only enhances your site’s design but also improves the overall user experience.

Access to Divi Page Builder

Before creating a vertical header, we need to access our header in the Divi Page Builder. Follow these steps to reach the Visual Builder:

  1. Click on Divi.
  2. Click on Theme Builder.
  3. Click on Build Global Header.
Access the Divi Page Builder to customize your header. A simple process to reach the Visual Builder and manage the Global Header effectively.

Create a Section and Insert Menu

For creating vertical headers, the very first step is to create a section that includes a row and column. After creating the section, we will insert a menu. Make sure that you are in the Divi Visual Builder, which is the right place to create a header.

  1. Click on the Plus Icon.
  2. Click on the Single Row with a Single Column, as shown in the screenshot below.
  3. A new module will automatically open. Type ‘Menu’ in the search bar.
  4. Once the menu appears, click on it to insert the menu.
Creating a vertical header in Divi: Add a section with a row, insert a menu module, and customize using Divi Visual Builder.

Menu Settings and Selection

As in the above step, you inserted a menu into that particular section, so the menu settings will automatically open, as shown in the screenshot below. In this step, we will select the menu that we want to display in the vertical header. The menu can be one of many, such as a footer menu or primary menu, depending on how many menus you create and which names you prefer. For this example, we created a menu named “Primary Menu.”

  1. Click on the Content tab.
  2. Click on the Menu dropdown button.
  3. Select your desired menu—in our case, we selected the “Primary Menu,” as shown in the screenshot below.
Menu settings in Divi for a vertical header: Select your desired menu, such as the Primary Menu, from the content tab's dropdown menu.

Read More: Getting Started with Divi: Content Settings

Converting Our Horizontal Header Menu to Vertical

In this step, we will show how to convert a horizontal header menu into a vertical header menu. For this, we need to open the section settings. These settings will be applied across all devices—Desktop, Tablet, and Mobile—to ensure responsiveness.

  1. Click on the settings button, which is the gear icon.
  2. Click on the Design tab.
  3. Click on Sizing.
  4. Set the header width to 10%, as shown in the screenshot below.
  5. Set the height to 100vh.
  6. Hover your mouse over the width setting, and a mobile-like icon will appear—click on it.
  7. Click on Tab first, as shown in the screenshot below, and set the width to 100%.
  8. Click on Mobile and set the width to 100%.
  9. Click on the Save button.
 converting a horizontal header to a vertical one in Divi: Adjust width and height settings in section sizing, ensuring responsiveness across desktop, tablet, and mobile devices.

Read More: How to Make Custom Divi Header Fixed or Sticky

Set Border for Vertical Header

To make the header look more attractive, we will set a border that outlines the header boundary. This step is optional and can be skipped if you prefer. We are adding the border because our header currently has no color, as shown in the screenshot below.

  1. Click on the Section settings button.
  2. Click on the Design tab.
  3. Find the Border option and click on it.
  4. When the border settings open, set a width—here, we’ve used 1 Px, but you can adjust it as needed.
  5. You can also add a color, but we are skipping that for now.
Set a border for a vertical header in Divi: Adjust border width in section design settings to enhance header appearance.

Read More: Getting Started with Divi: Design Settings

Set Padding of Vertical Header

To align our menu text at the center, we need to add some padding, which can be controlled from the Design tab of the section settings. Follow these steps for accurate alignment:

  1. Click on the Section settings icon button.
  2. Click on the Design tab.
  3. Find the Spacing option and click on it.
  4. Set padding to 3vh or 4vh for Desktop.
  5. Set padding to 0px for Mobile and Tablet modes.
  6. Click on the Save button.
 Adjust padding values to align the menu text in the center for desktop, mobile, and tablet views.

Read More: 3 Ways to Customize the Divi Header

Upload Logo to the Vertical Header Menu

One of the most important parts of creating a header is adding a logo. In this step, we will show you how to upload a logo and place it at the top of the text in the header.

  1. Click on the Menu settings this time.
  2. Click on the Content tab.
  3. Click on Logo.
  4. Click on Add Image and upload your logo here.
  5. Click on the Design tab.
  6. Click on Layout.
  7. In the Style option, select Centered.
  8. Click on the Save button.
Upload a logo to a vertical header menu in Divi: Access menu settings, upload the logo, and set its layout to centered.

Set the Header Position to Fixed

In this step, we will set the header’s position to “fixed.” When we scroll, the header currently scrolls and hides. By setting it to fixed, the header will remain visible and not scroll.

  1. Click on the Section settings.
  2. Click on the Advanced tab.
  3. Find the Position setting and click on it.
  4. Click on the Position dropdown option and select Fixed.
  5. Click on the Save button.
Set the header to a fixed position so it remains visible while scrolling, making the layout more user-friendly.

Read More: How to Make Custom Divi Header Fixed or Sticky

Set Background Color of Vertical Header

The default background color is white, which overtakes the body section. Therefore, we need to change the background color to transparent. This setting will apply to both the section settings and the menu settings.

  1. Click on the Section settings again.
  2. Click on the Content tab.
  3. Click on Background.
  4. Set the color to transparent, as shown in the image below.
  5. Click on the Save button.
  6. Again, click on the Menu settings button, as shown in the screenshot below.
  7. Click on the Content tab, then click on Background and change it to transparent color.
Changing the background color of a vertical header in Divi to transparent, including section and menu settings adjustments.

Read More: How to create a Transparent Header Menu in Divi

Final Result

The GIF below shows the result of successfully implementing all the steps. After following this guide, you will have successfully created a vertical navigation menu or header for your Divi website. This stylish header, which features a centered logo and a transparent background, enhances the usability and aesthetics of your site. The final setup ensures responsiveness across all devices, allowing for an improved user experience that is both visually appealing and functional. By implementing these steps, your website will not only stand out but also provide seamless navigation for visitors.

View the completed vertical header setup, showcasing the final design after following all implementation steps.

Conclusion

Creating a vertical navigation menu or header in Divi can greatly enhance your website’s design and usability. You can easily set up a stylish, responsive vertical header that improves both aesthetics and functionality. From accessing the Divi Page Builder to adding custom elements like borders, logos, and background transparency, each step ensures a smooth and seamless user experience. Once implemented, your vertical header will not only stand out visually but also provide easy navigation for your site visitors.
Read More:10 Amazing Divi Menu Styles

0 Comments

Submit a Comment

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

Featured Divi Products

 

Recommended Hosting

Pin It on Pinterest

Shares