In this lesson, we’re going to take a look at how to get started using the menu element inside Brizy and Brizy Pro. The key differences between the Pro and the free version of the menu element is that you have more options, including things like a mega menu option with the Pro version. Okay, so let’s get started, I’ve created a basic header, two columns single row. We need to go ahead now and insert the menu element, so we click the plus we’ll do a search for menu and we’ll just drag that onto our design that now inserts a basic menu for us. But we have lots of different options inside here for the positioning, the styling and also the type of menu that we want to create.

Now, when you’re working with menus in Brizy, there are a couple of different ways in which you’ll interact with the various different parts of the menu itself. For example, we want to select the overall menu container, we simply come over and click on the little grey circle. In the top right hand corner, and that opens up the options now for the menu, so we can choose where the menu comes from, so we’ll click on the first icon you can see the menu is currently using my main menu but if you have multiple menus, you can simply select the menu, that’s applicable to you from here now, if you’re unsure how to create your own menus inside WordPress, it’s very easy just hop over into the dashboard choose appearance and then menus and inside there we can create any menus that we want, so, let’s create a new menu now we’ll give it a name and we’ll click on create menu. Now what we need to do is go ahead and add any of the items we want from pages posts, custom links and so on.

So, let’s just add a couple in from here: okay, we’ll click on add to menu and there’s our menu structure. All we need to do now is click on save menu and we’ve created a menu, and that’s now available to us inside Brizy itself, with that taken care of. Let’s get back to the rest of the tutorial. You can also set this up to be a hamburger menu. We click on it, you’ll see it updates and creates a hamburger menu.

When you choose the hamburger option, you then have some specific options for position of the actual menu itself and also the size. So you can set this to be positioned to the left or to the right and adjust the size accordingly. If we now check the hamburger menu it pops out from the left hand side if we want to come back up and change that we can. Click on that grey circle again choose the first option and then adjust this to be the right hand. Side and again, let’s just quickly test this out, and you see it now – pops up from the right hand, side pretty cool and really easy to do.

Okay, let’s just change that back to a standard menu and you can see now we have options for the orientation of the menu itself. So the moment we’ve got this as a horizontal menu, but if you wanted to create a vertical menu, you could do just that. Really simple and again, you’ve got spacing, so you can use this to adjust the space between each one of your menu entries, really cool and a nice visual way to make these changes. Let’s set this back and see what other options we have, we can come back up to our toolbar menu and we can click to adjust the alignment so we’ll set this over to the right hand, side, but you’ve also got left and centre. If you want to open up the additional options, you can simply click the cog icon, as we used to and inside there you’ve got your styling and advanced options.

If you want to duplicate this or delete it, you can use the relevant icons. Okay. So the next thing we want to do is go ahead and adjust the styling for the menu items themselves to do that, we simply come over the menu item, for example home click, and that now gives us a different set of options. First of all, we’ve got the option for the menu itself and we can turn this into a mega menu. Now this is a pro only feature.

If you’re using the free version of Brizy, you won’t have the option to set a mega menu. I will come back to the mega menu in a moment. You’ve also got options, then for making this an icon. So if you want to add an icon to this, you can do that by simply choosing the icon option and searching for something we’ll choose home. For this example and we’ll just pick a little icon and you can see that now updates and puts an icon in his place, you can adjust the position of that icon, the size the spacing and so on.

Let’s remove that for now. Next up, we’ve got the typography, and this is where we can configure the menu and, as we’ve seen in most items when it comes to working with typography and things inside Brizy itself. If we make a change to one of these, all of those entries will change. Just makes the whole process really quick and easy, and finally, we’ve got the options to change the color of the typography and also our additional options. Should we want to open those up?

Okay, so we’ve seen how to do the basics next up. Let’s take a look at how we create a mega menu now when you create a mega menu inside Brizy Pro when you select a specific entry in your menu, that’s what you said to be a mega menu for that particular section. So, for example, we’re going to set one for home. This won’t affect lessons 11, 12, 10 and so on. So let’s click this option and we’ll just check for mega menu and what this does is.

It opens up the mega menu placeholder. Now we can click outside and we get just basically a plain old box with a plus symbol in the middle, and this plus allows us to add pretty much anything we want to in this design. So just consider this to be like a new section which you can add columns into it rows into it, and then you can drop whatever elements you want in today. We’re going to keep this really simple, just to demonstrate how things work. So, first of all, let’s click on that plus and what we’re going to do is we’re going to add in an extra column, so we’re just going to drag another column in and now we have a pretty simple two-column display.

Next up we’re going to put a menu inside this first section. Now I’ve already gone ahead and created a new menu item inside WordPress. In the same way, you create any kind of menu, so I’m going to click plus and then we’re going to just grab the menu icon drop that element inside there and now that places the actual menu inside here now. At the moment it looks a little bit rubbish, we’ve got no styling and it’s the wrong menu. So we can do now is we can click on the menu itself by clicking this little top grey circle, and now we’ve got the options specific to that particular menu.

So the first thing we can do is we can change this from menu or the main menu into mega menu, one which is what I’ve just created for this specific section, and I can adjust the orientation so we’re going to set this to be vertical. And if we want to adjust the spacing, we can do that inside there. Next up, we can adjust the alignment of this we’re going to set this over to the left hand side. And if you want to adjust things like your padding and your spacing and all those kinds of advanced options, you can click the cog icon just for ease. We’ll duplicate this in a moment, but before we do, let’s go ahead and adjust the styling, so this works in exactly the same way as when working with the main menu item.

You simply come over and select the menu itself and we now get specific options. So now we can do is we can click the typography? We can adjust this, so it’s in keeping with the rest of the styling and we’ll also go ahead and adjust the color and set this to be white and you notice we’ve got the normal. We’ve got the active and hover states as well, so we can set those up inside here. So we’ll say we’ll set the hover and we’ll just make that a little bit different, we’ll make this pale blue and we’ll go over to the selected option or the active option and we’ll set that back to white.

If we need to so now, we create this hover effect. Pretty simple and again, you’ve got the background. The border. Should you want to adjust those as well? So, let’s click outside there and we’ve now created a really simple mega menu.

We can duplicate this and then we can make any changes. So, let’s just duplicate this we’ll position this, where we want, on the right hand, side and now, if we wanted to, we could go ahead and change the menu. That’s going to be used inside you alternately. We could drop in an image icons, anything you want to okay, so that’s how we create the mega menu. Now, if you want to adjust the mega menu container, we simply come to the left hand, side and choose this little grey.

Circle select that and now we can go ahead and we can adjust the background color. So we might want to change this as something different like a grey, for example, or a white or this darker blue color. Whatever you want to set it to, you, have full control we’ll set that back to a little bit darker like so just so, you can see what I’m doing and again, we’ve got the hover option. Should we want to use that we can apply a border to this and shadows now? We also have options for the actual alignment and finally, we have the settings option.

Now the settings option is really useful. It allows us to set up various different parts of our mega menu at the moment. You can see that this is sitting just a little too high inside of a design, so we can use the offset value to bring that down and make sure everything is aligned. Perfectly we can also set the width of this based upon percentage, pixel value or the view port width. So let’s just make this a hundred percent, and that now gives us a full width menu.

If you want to, we can adjust the height from auto to a custom height, and finally, we also have the more settings which gives us the ability to set up our padding’s corners, those kinds of things. So if you want to round corners off, you could do just that by using this option, pretty cool and really easy to do. Let’s reset that we’ll update this and we’ll just go and take a look at this and see exactly what we’ve done so there we go, there’s our top navigation with our new menu setup inside there. If we come over the home, you can see, there’s our mega menu all set up. Our hover states all working exactly as we wanted to.

So. It’s really easy to get started using either the free version of Brizy or the Pro version of Brizy