Setting up the Menu

With Pronto, there is a new element that allows you to create and manage your menus directly from a Flexblock. You can find it by selecting the Menu Element from the Header elements available inside your Flexblock plugin. 

This element allows you to either use/edit an existing menu, or create a new one from scratch. 

Note: You can still manage your menus the old way by going to Appearance -> Menus, but please note that you'll still need to select the menu inside the Flexblock which will be used for your Header/Footer layouts. 

Creating a new menu using a FlexBlock

To create a new menu with FlexBlock, it is first needed to add a menu element, then click on the "Add New Menu" button. Next, you'll need to add your menu items. 

You can display a Page, Post, Gallery, or Custom Link. Make sure you save both your item's and menu's settings afterward.

Inserting an existing menu into a Flexblock

If you want to use an existing menu inside a Flexblock, you'll simply need to add the menu element and select the menu you want to display from the dropdown menu.

Space Evenly

Space Evenly function will distribute the menu items evenly. In other words, the menu items will have equal space between them. Let's see some examples. Here we have the menu items distributed evenly:

Now, let's see how the items align when they're not evenly distributed anymore. For this we will turn off Space Evenly(1) option:

After you have disabled this option you will be able to see that a new Gap option has appeared which allows you to customize the distance in px between your menu items. Also, there is a Content Distribution option that allows you to customize the horizontal and vertical alignment of your menu inside the menu element's placeholder.

The menu's direction

The menu's direction can be either set horizontally or vertically. 

A horizontal menu will usually be used for the desktop view, whereas a vertical menu can be used on mobile header layouts, or inside a Pop-Up Header.

Typography, Colors, and Submenu Settings

After configuring your Menu's layout, it's important you also check the Typography, Colors, and Submenu Settings in case you have dropdown menus.