Menus & Navigation

Where you have headers, you need a menu. Within the builder, you will have access to two menus depending on whether you are using the free version or the pro version. And this is done through the elements. If we go to the elements on the sidebar, depending on which version you are using, you will see the menu element here. The pro version will contain more functionality than the free version. I've already dragged this onto the page and you will see it says create a menu. And I think this is where we need to start. First, go and create a menu. That is done within our CMS section. Go to the top left and click on CMS, and then here, select Menus. First up, we need to create a new menu. Go to the drop-down and select Create New menu, and I will call this main demo menu. Click on the plus and then select it. Then go to the pages on the left and select the pages that you want to add. Click Add to menu. And in this case, I'm just going to drag them. I simply click Hold and Drag to make sure that they are in the right order.

Once I've created the menu, I can click on Save Changes. Let's close up and go back to our page. The page I'm currently working on is a RSVP or a Contact Us page, and it is set to draft. So I'll first go ahead and publish it because I want to add this page to the menu as well. Let's go back to the CMS, select Menus, and then you will see now we have the option to add the RSVP as well, and Add to menu. Great. Save our changes, close out, and close out. Go to Create menu and select the options. Go all the way left, and then next to menu, you will see we don't have that menu that I've just created. The reason for that is that the page is still in the old state. So just go ahead and refresh your browser, and then with the next instance, you'll be able to load the menu you just created. Let's go again to the menu. And then next to menu, you will see here it says main demo menu, and I selected, and in comes my menu. This is a really powerful element. Apart from the toolbar, when you go to the menu element element itself, and you select your own settings, you have your padding, you have your margin, you also have these functions, and then you have the option to align it.

The real magic happens when you select any of the links themselves. Once you do so, you have the option to create a mega menu for that link, which is only a pro feature. I can then bring in any other element from my page here and create a mega element for this. And if I need to disable it, We'll simply click on the link again and we go and deselect mega menu. Each of these can have their own icon, so very easily add an icon that meets the description of the link. In this case, it says home. I'll select glyph and then type house, and let's select this one over here. The icon appears next to the menu link. I can put it on the right, on the left. I can increase the size and even the spacing. Bring it a little bit closer. Next to that topography, this will apply to the entire menu element. And I can decrease it a little bit. And then we go to color. We have here a lot of functionality. We can set the text color, and that is normal state. This will be the hover state, and then we can leave it on the black for the active state.

Let's click outside, and you can see as I hover over them, they tend that teal turquoise color. And the active one, which is this RSVP page, will be here in black. This way, you can style out each of the menu links individually. Let's go back to the menu element and look at the functions we have here. Hamburger menu will We'll talk about shortly, but we can also space this one in a vertical alignment and then change the spacing between the links. Take it a little bit closer to each other. Under settings, you're going to have the normal padding as well as margins. One thing to note is that often when you work with the menu element, like in this case, it's going to be very difficult to select the column or the menu element. To do so, simply click on this one and then hit escape key on your keyboard, which will go one level up and choose the menu element settings for you. From here, you can hit escape again, and that will take you to the column settings. Very easy way to work with the various elements if they get a little bit clustered.

From here, we look at how this will display on mobile, which is very similar to how it will be working on tablet. By default, you will see a hamburger menu appears. By selecting it, it opens the drawer in which the menu will appear. But I want to style out the hamburger menu, so how do I actually get to the settings? In this case, it's going to be a little bit tricky. So a workaround is to select the Column settings. Then we go to Padding and the Padding at the top, and we just increase it for now. This will allow us to go and click on the settings of the hamburger. There we go. Now I have control over the settings. Select it. Yes, we want to keep it as a hamburger. I can change the size of it. I can also change the drawer position to the left or to the right. Currently, it comes out on the left. Let's put it on the right. When I selected, the drawer will now appear here on the right. Select the settings again. And we can change the color of the hamburger menu. After you have styled it out, you can just go again to the Columns Padding and bring it down.

Click on it to open the drawer. And from here, For each of these, you again have the ability to change out the icons as well as to styling. We can change the topography in terms of the size, change the color for the text, the background, and the border. In this case, because that one is in black, we'll have to change the background to something that is easier to see. There we go. Also, line it to the middle, to the right, or to the left.