How to Create Horizontal Menu in Elementor | JetMenu plugin

[Music] hey everyone i'm julie and welcome back to kraka block channel and this is our next video dedicated to the updated jet menu plugin in the previous one we talked about the plugins settings in detail and also built a mega menu from scratch and in today's tutorial i'd like to walk you through the process of creating a horizontal mega menu here is an example of a menu that we're going to build together before we begin don't forget to subscribe to our channel and also hit the notification bell so shall we get started first of all make sure that you have the jet menu plugin installed and updated to the latest version in this video we won't be focusing our attention on the plugins settings since we did that in the previous tutorial so if you missed it go ahead and check it out the second step is turning the revamp menu on and this feature will update both plugin and the widget settings after that let's create a menu a go to the appearance menus in case you already have a menu skip this step and move on to the next part of a video let's give it a name for example a main menu and now make it main right here in the menu settings and don't forget to hit the create button and after the page is refreshed you will see that now jet menu locations settings are available let's enable jet menu for current allocation if it is needed you can also select a menu for mobile layout and now it's time to add some menu items right here you will see different menu items types like pages posts custom links and more depending on what kind of website you have and by the way here is a tip for you if there are some elements you don't see in this list simply unfold the screen options in the upper right corner here you will find more options post types product product tags and so on check the ones that you need then unfold the added elements select the necessary items and click add to menu to add the sub items to your menu simply click and hold the needed menu item and then move it under the other one and don't forget to save it here we go so basically we're done with creating a simple menu but on this page you can also add a mega menu content using this blue settings button let me briefly explain the difference between the menus here is a simple horizontal one the menu items we see here are top items and everything that unfolds below is called sub items on the first glance mega menu is exactly the same although its sub-level can be enriched with different content for example product grids media contact forms or even data from the options pages both menus are displayed and styled with the help of a mega menu widget if you feel you're ready to completely transform your menu just follow the link to the previous tutorial in the description box below and now let's display our menu on the front end for that i will go to croco block theme builder and edit the header with elementor in this search bar start typing mega menu as you can see we have just a simple mega menu widget here and also a vertical one for now i'm gonna add a mega menu widget and as for the vertical one we will use it in our next tutorial so stay tuned and this is how the updated widget settings look the main difference can be seen right now on the screen so on the left is the old version and on the right a new one you will see the updated settings only if you turn the revamp manual on so keep that in mind before we start with the settings i want to style the menu a bit so you could better see the changes that will be applied a bit later first of all in the content tab let's select a menu we just created layout won't be changed here as we're going to build a simple horizontal menu but if you want to use a different layout you can always change it right here drop down layout relate only to the mobile or tablet version where a horizontal layout transforms into a drop down one i'm gonna switch to the mobile to show you how it works a default drop down layout makes the menu items be visible on top of the content so it literally covers the top part of the page let's switch it to push this way the menu pushes the content down now it's more convenient since we can see the menu as well as the rest of the header it's up to you to decide what option better suits your needs under the drop down position you can set it to right center or left animation effect and the next two options submenu position and the trigger will be applied only to the sub menu items in case you have any sub items like for example i have new house under the houses you can make the animation a bit smoother by setting it to fade moreover you can adjust the position and the change the trigger event to let's say click in this case one more option will appear submenu target basically it determines the exact area where you need to click to see the submenu or mega menu content so if it's set to item you will be able to click either on a menu item or icon and it will show the content anyway but if sub icon is selected the click will work only with the icon you can see i'm clicking on the menu item right now and nothing happened keep that in mind the next one here mega container width type it gives you an opportunity to set the width type to container which is a default option it says the width that corresponds with the container width then selector allows you to adjust the width using css selector and the mega container width will be of the menu items width if you select items breakpoint is a number of pixels when a website's content and design will adapt in a certain way to provide the best user experience now a rollup it's an option specifically for a horizontal menu it can be a lifesaver if there are a lot of menu items and those ones that don't fit the container will be folded into just one menu item a bit below you will find the two roll-up types text and icon the text can be easily customized and as for the icon you can choose one from the library or upload an svg file the last options that we have here are different icons for a drop down or a toggle and what's left is one feature that everyone has been asking for mobile device render it is turned off by default but once you decide you need this option turn it on and you will get one more settings tab mobile menu here you will find a lot of different options on how you can customize your mobile menu according to your needs in our next videos we will get back to the mobile menu and create one from scratch but now let's move on to the style tab to check the changes it got with the latest update so now there are only two options main menu and a drop down if you have mobile device render turned on you will see one more tab mobile comparing to the old mega menu widget it got only more convenient main menu is for styling the menu itself the drop down is just for the drop down menu and mobile is for mobile menu you won't get confused here anymore we will work with the main menu tab since we're building a simple horizontal menu today so it has container levels and a state top and sub have the same styling options about top relates to the menu items and the sub is for the sub menu items in the items typography you can customize the font size or weight etc and also set a container color [Music] moreover you will be able to adjust items vertical and horizontal padding and also add the space between the items items align is for changing the position either to the left side middle or right or make it stretch to full width alright so the changes i made here were applied only to the top part of a menu and didn't affect the sub menu item to style it as well i need to switch to the next tab sabo and repeat the same steps and great and a bit below you will find the state settings for styling normal over and active state just pick the necessary colors and by the way we decided to give you unlimited power here so you will have an opportunity to style top and the sub items separately for each state whenever you feel you're done here and your menu looks amazing click publish or update the page time to check the front end see nothing harder it is simple yet neat and stylish guys that was it for this tutorial now you know that creating a menu isn't a big deal anymore and you will definitely spend less time building and styling it with the updated jet menu plugin give us a like if you enjoyed this video and also don't forget to subscribe and hit the notification bell thank you so much for watching and i'll see you in the next one

Channel: Crocoblock

Views: 2,845

Keywords: elementor horizontal dropdown menu, elementor navigation menu horizontal, elementor menu widget, elementor mobile menu, elementor menu mobile, elementor dropdown menu, elementor dropdown, elementor header menu, elementor custom menu, elementor responsive menu, elementor submenu, elementor overlay menu, jetmenu, jetmenu tutorial, jetmenu wordpress, jetmenu elementor tutorial, jetmenu for elementor, crocoblock, crocoblock plugins, crocoblock tutorials, elementor drop down menu

Id: cDfgXUXDO_U

Length: 12min 45sec (765 seconds)

Published: Tue Nov 16 2021