Select a menu to be displayed under the content toggle. Inside the one-column row, add a new Menu Module. Then update the row settings as follows: Size and Padding To start, add a one-column row to the section. We will also use the vh length unit so that the menu will scale nicely with different browser heights. To do this we will be using a menu module with some custom CSS to style the navigation to be displayed vertically. With the section in place, we are ready to design the vertical menu. Now your section is in a vertical layout on the left side of the template. 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 ![]() 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: Padding (tablet and phone): 0px top, 0px bottomĬontinue the design by adding a box-shadow as follows:.Inside the Global Header Layout Editor, open the settings of the regular section already there and update the following. Part 2: Designing the Vertical Section Layout ![]() Then select the option “Build from Scratch”. Then click the “Add Global Header” area of the Default Website Template and select “Build Global Header” from the dropdown. To start, go to the WordPress Dashboard and navigate to 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. Let’s get to the tutorial, shall we? Part 1: Building a New Global Headerįor this tutorial, we are going to build the vertical navigation menu in a Global Header using the Divi Theme Builder. Save the Divi Theme Builder changes as soon as you want the template to be activated. Once you’ve uploaded the file, you’ll notice a new global header and footer in your default website template. ![]() 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’. Then, in the top right corner, you’ll see an icon with two arrows. To upload the template, navigate to the Divi Theme Builder in the backend of your WordPress website. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs! You will not be “resubscribed” or receive extra emails. 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. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. ![]() To lay your hands on the designs from this tutorial, you will first need to download it using the button below. Here is a quick look at the design we’ll build in this tutorial. And you will have full power to add additional Divi Modules to the vertical header and design them with the Divi builder. This will allow you more room for showcasing your WordPress menu items. In this tutorial, we are going to show you how to build a custom vertical navigation menu using the Divi Theme Builder. Horizontal menus can be difficult to fit all the menu links needed, especially on smaller browser widths. Vertical navigation menus can come in handy for certain websites that need more menu items at the forefront.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |