How To Use The Menu Element – Transcript
Hi everyone, in this video we’re looking at how to use the menu element.
The menu element is brand new in Avada 7 and it can be used to add a menu anywhere in your content. But when creating custom headers using about a layout, it’s an integral component.
Make sure you subscribe to our YouTube channel to keep up with all the latest videos like this one. And if you don’t want to miss one, click the Bell icon to get notifications of all new videos on our channel. OK, let’s begin.
As mentioned, the menu element can be used anywhere in your content to insert a menu, but when building a custom header using about a layout, this element comes into its own.
A menu will almost always be a central component in a custom header, and this element allows you to design and build virtually any type of menu you can imagine.
I’m on the Landscaper demo here and I’m going to demonstrate the menu element by building a new header for this site using about a layout.
I’ll just move over to the layout section builder here, where I’ve got the new header layout section setup and to finish it, I just need to add the menu element to these three quarters with column here.
OK, to add our menu element, it’s just like adding any other element and when I do it loads into the column.
The element has five tabs. General, main, sub menu, mobile and extras tab.
It all starts on the general tab with the menu option.
Here you assign the menu you want to display.
The menus themselves must be made in the usual way through the appearance menu section from the WordPress dashboard and all existing menus are shown on the dropdown in this option.
In this case it is loaded the landscape main menu because there’s only one menu on the side.
But if there were others, it would load the first one by alphabetical order and then you would choose your desired menu from the drop down.
Under this, is the element visibility option. I’m doing it all in one menu here, so I’ll leave the visibility turned on for all screen sizes.
In the option below this you can choose if you want the element visibility to apply to the normal or Sticky State of the parent container, or both.
This option will only show if the parent container is set to sticky, which mine is.
I want the element to be visible at all times, so again I’ll leave it on the default value with both selected.
Direction is next, then this of course allows you to choose whether the menu will be horizontal or vertical.
Vertical menus would be useful in a page with side navigation in a sidebar or perhaps in the footer, but I’ll leave this one horizontal.
You can set a margin above and below the element in the next option, and I’m going to add 20 pixels top margin here.
This is because I’m going to add a background hover colour to this menu and the items will be aligned to stretch and I don’t want that going all the way to the top of the column.
Hello, this is transition time. Is this the time in milliseconds it takes for any sub menu expansion or any other hover transitions to take effect? I think 300 milliseconds is about right.
Space between main menu and sub menu is an option that allows you to place as much space as you want between the main menu and any submenus.
I’m going to leave this empty for my example, but this can be used quite creatively and also in conjunction with the next few options.
I’ll just quickly add 40 pixels in here.
And we can then see the effect straight away in the builder.
And now let’s look at the next option menu arrows. Here you can choose to have arrows on the main menu, the main menu when it’s active and the sub menu.
You can choose any number of these options.
These are not the dropdown carrots that show a sub menu is present, but rather than menu element method of creating the arrow. Main menu highlights done one of the menu styles available when customizing your menu from the global options and as seen on the inverter construction website.
I’ll just turn on sub menu arrows and when I do this, another option appears for their width and height.
I’ll just make them 20 pixels in both directions. And now when we mouse over the menu, we can see the arrows at the top of the sub menu.
As mentioned, you could use these options in many ways, but for my example I’m going to remove the space and turn the arrows off.
The last of the options on the general tab at the CSS class and CSS ID fields.
With which you can further customize the element with CSS, but we don’t need those, so let’s move to the next tab. The main menu tab.
So here we customize the main menu.
The first option is minimum height.
With this option we can set a minimum height for the menu element itself.
This will affect the heart of the menu, obviously, but it will also affect background colors and links.
For my example, I’m going to set this to 80 pixels, and we will see why as we go.
Below this, if the parent container is set to be sticky, you will also find a sticky minimum hide option as well.
And here I’m going to set the sticky minimum height to 60 pixels, which means the menu will shrink a bit as the container becomes sticky.
Then comes the align items option.
With this you can align your menu items to the top, middle or bottom of the column using the flex start centre or flex end options.
Well, you can set it to stretch. For my example, I’m going to leave this on stretch.
The next option here is justification.
And this aligns the menu element horizontally within the column.
You can choose from Flex Start Santa Flex end space between space around or space evenly.
For my example, I want my menu to be aligned to the right, so I will choose flex end.
Following this or a few font options.
You can specify the main menu font size and the main menu font family independently from the Submenus and mobile menus, and you can also choose text transform if you wish.
It loads using the default menu font from the global options at 16 pixels and the menu items themselves have been added in caps in my actual menu, so I don’t need to adjust any of these three options. Then comes the main menu item padding option. This can be useful if applying borders or hover effects as it affects each menu item.
Whereas the option below this, the main menu item spacing affects the space between the items.
For this example, I’m going to set 20 pixels, main menu item, padding all the way around.
And I’m going to space the main menu items out by 15 pixels.
OK, that’s starting to look better.
Then comes the main menu item border radius.
I’m going to have a background colour on hover for this menu, so I’m going to set this to 10 pixels on the top left and top right, but leave the bottom right and left empty as the menu will be sitting along the bottom of the column.
Following this is an option called main menu hover transition.
The right to choose from and for my example, I think the bottom transition will look the best.
If you do have any icons in your main menu items which you said in the actual menu via the about a menu options, then here you can choose the position of them.
In the next option, you can choose the menu icon size.
I don’t have any icons on my main menu items, so I’ll skip over this one.
The same goes for the next option. Mega Menu thumbnail size as I’m not using a mega menu.
But of course, these options might well be very useful for your menu.
The last section on this tab is the main menu item styling.
As you can see here, there are options for the regular state of the menu, as well as options for the hover state.
You can change the main menu item background colour, the main menu item text colour. You can add a border to any side of the main menu items and set its colour and you can set the main menu items icon colour.
Setting a top or bottom border to the menu items would of course be the way to recreate the top bar and bottom bar. Main menu highlight styles as per the global options method of adding a menu.
To the regular state, I’m happy with the default values here, but if I move to the hover state, I’ll change the main menu item, hover active background colour to this green.
And change the main menu item. Hover active text colour to white.
I’ll leave the other three as they are, as they don’t affect my menu.
OK, so now we head to the sub menu tab. You can skip this of course if your menu doesn’t have any submenus.
The first option is dropdown carrots. I’m going to leave this on, yes, so it’s easy to see which main menu items have submenus.
For the next option sub menu mode.
You can choose from a normal dropdown or a flyout menu.
I’ll stick with a normal dropdown, but I’ll activate fly out so we can have a quick look.
Fly out menus require a Click to open and if your main menu items have a page link like these two and so I’m not just custom links triggering the drop down, then the carrot is the actual link to open the flyer.
If we were to click on the actual menu text, then the page link is activated.
So, with flyouts, it’s perhaps best if the top menu items are custom items, just triggering the flyer.
I’ll just go into preview and open the services flyout menu.
OK, that looks good, but for this example I’m going to put it back to drop down before I do though, just take note that you can also choose the direction of the fly out with the flyout direction option that appears when flyout is selected.
OK with dropdown selected the next option is expand method. I’m going to leave it on hover as otherwise I’d run into the same problem as before with the page links.
The next option is sub menu expand direction and I want these submenus to expand to the right.
You can also choose a sub menu expand transition.
Fade is the default value and that looks fine, but here I might change this to slide up.
You can set a sub menu maximum width with the next option, but in this case, I don’t need to change anything here.
OK, then comes a bunch of options that will also on the main menu tab there is a sub menu, font size and font family as well as sub menu text transform.
So, this allows you to independently control Main and sub menu typography.
The sub menu font size comes in at a couple of pixels smaller than the main menu by default, and for my example I’m totally happy as it is. Then there is sub menu item padding which again you can control the padding all the way around each sub menu item.
Submenu border radius affects the whole sub menu and here I might just add a bit of bottom border radius to match the main menu. I’ll just make it a bit smaller at 8 pixels bottom right and bottom left.
Box shadow is the next option and if you select this you get 5 new options with which to control it.
I’ll skip this for the menu here but check out the linked how to use the container element and how to use the audio element videos for examples of how box shadows work.
The sub menu separated colour is next and here I might set this to transparent to remove the separator entirely.
Then comes the sub menu item styling section. Here you can change the sub menu background colour and the sub menu text colour.
Again, I’m going to leave the defaults for the regular state and change the hover states to green for the sub menu hover active background colour and white for the sub menu. Hover active text colour.
So now of course, as I mouse over them, the individual sub menu items change colour on hover.
OK, so that’s the sub menu tab.
Let’s move on now to customize this menu for mobile with the mobile tab.
The first option is collapsed to mobile breakpoint.
Here you can choose to not have it collapse at all. Have it collapse on small screen sizes. Medium screen size is large screen sizes, Florida custom pixel value.
There are a lot of options here. For a lot of scenarios, but for this example I’m going to choose medium screen.
So, what this means is that this menu will break to the mobile layout menu on any screen that is the size I have set for medium in my global options or smaller.
If we had to, global options responsive and Scroll down we will see the element responsive breakpoints and here I have the default value of 1024 pixels for medium.
So, on any device with a screen this size or less, the mobile menu will appear.
If we go to the medium screen size responsive mode, here from the toolbar, we can indeed see the menu now loads as a mobile menu.
But it needs some styling.
I’ll just go through the rest of this tab and get it looking how I want.
The next option is mobile menu mode.
Here you can choose whether the mobile menu is collapsed or expanded on load, and here I will leave it on collapsed.
The mobile menu expand mode is next.
You can choose from full width static within column normal or within column static.
Full width opens the submenus in the full screen width whereas within column opens them within the column with the menu element is in.
So, if I set it to within column normal, we can see it expands within and into the column that menu is in.
If we change it to within column static.
It stays within the column width, but this time, it doesn’t expand within the column, but outside it.
For my example, I prefer full screen which opens are submenus full width.
After this is mobile menu trigger padding.
There’s a bit of padding applied by default. But here you can totally customize. It if you need to, I’m going to leave this one as is.
Then we have the mobile menu trigger background colour. I’m going to change this to green and the one beneath it. The mobile menu trigger text colour. I will change to white.
This also changes the colour of the trigger icon.
Mobile menu trigger text allows us to add some text next to the menu icon if we wish. For example, I could type menu in here, but I’ll leave that empty for this example and move onto the icons.
With the menu element you can choose both the trigger expand icon in the collapse icon. I’m happy with the defaults here of the bars and the cross, but you can choose from any of the icons installed on your side.
Mobile menu trigger font size is the next option, and I might make this a bit bigger, maybe 24 pixels.
Now we come to the mobile menu trigger horizontal alignment. You can choose from flex start centre or flex end here. And for my example I want Flex end which pushes it over to the end of the column minus any padding.
For my example, I have set 5% right padding on the column in both medium and small screen views using the responsive option sets feature to help position the trigger.
Another option below. This allows you to set the mobile menu trigger button full width.
But I’ll leave that or not.
The mobile menu trigger bottom margin option allows us to set up.
Or the margin to our mobile menu. And for this option I will set this to 40 pixels.
There is a mobile menu text align option which I will leave on left.
A mobile menu indent submenus option, which I will leave on.
And then there are the font size and font family options again.
Once again, I’ll leave them as they are, as well as the next option. The mobile menu separated color.
At the bottom of this tab we have the mobile menu item styling section.
In this case, I’m going to change the mobile menu background color to a light grey on the regular state to make it stand out a bit.
And on the hover state options I’ll set the background and text options to green and white.
OK, nearly done.
Let’s look at the final tab, the extras tab.
Here there’s the animation type options.
It’s set to none by default. That here if we want, we can apply an animation to the loading of the element.
There are seven options to choose from, and if you do choose one, you can then control the direction, speed and offset of that animation.
For this example, I’m just going to leave it on none.
Alright, I think we’re done. Let’s just go to preview and check this menu out.
OK, he’s a final menu. This is the mobile menu here showing on medium screen view. We can see the mobile menu trigger animate.
And here’s the menu with its customized colors and sub menu indents.
Let’s go to the large screen view.
And here as I mouse over the menu, you can see the background color kick in with the 20 pixels top margin, the border radius and the alignment to the bottom of the column.
We can see a nice submenu and if I scroll up, we can see how my container become sticky. The background color changes and the menu and logo both shrink in size.
OK, that was epic. I hope you can now see how incredibly featured this menu element is and how with this and about a layout, there are basically no limits to the type of header and menus. You can now create with the other website builder.
OK, this concludes our video on how to use the menu element.
Make sure you subscribe to a YouTube channel to keep up with all the latest videos and if you have any questions or need assistance. Please create a support ticket and our team will gladly assist you.
As always, we want to thank you for choosing Avada.