hey there it's Julia from Krakow block and welcome to our new video and today we are going to discuss the Jett menu plugin and it's awesome hamburger menu widget it's a brand new feature that allows you to add the mobile layout to your desktop as well so I'd like to share with you guys the short outline so in this video we are going to see what is the handyman you structure how to add and edit its elements items how to add the content to the menu spoiler you can add any content you want I'd like to briefly go over the main and styling settings as well and we'll look at the general settings from the dashboard and in the element page editor so let's get it started guys hamburger menu widget is the coolest option when it comes to the functionality and style use it with Ajax on mobile view mode and on the desktop and tablet as well and Crocker recommends you to use it when you have too many items in your menu and also I would like to share with you guys the proper menu structure so the first girls header really for example social icons the next goes breadcrumbs next as the menu items itself so the main content yeah and the last like framing is a footer you can put anything there for example contacts or banners or etc so I'd like to show you each and every element how to add it and how to style it up a bit guys so let's start from the templates from the header and footer template if you want to add contact info map banners social media icons and any other content that would be anyways in your menu food and header are perfect for this so to find the templates follow with me to the dashboard next is templates tab and save template so let's open the future template in the element or page builder and change it just a bit for example I'll add I will drag and drop the basic gallery widget just to show up some photos or images you can use any widget you want you can use gallery you can use portfolio as well so let's preview how the menu food has changed cool don't hesitate to use your imagination to make the essential content easily accessible for your user ok do you remember what is next the next is the menu itself so let's have a look at what are the menu items included in my menu to do this follow to the wordpress dashboard then appearance and click menu alright as you see I have a menu that consists all the custom links only with these sub items but you can add here for example you see here from the left the pages posts custom links categories and you can add much more if you had more plugins let's add some categories for example the lifestyle and I will add several sub items to these items to show you guys how to build this sub structure and I will choose race and travel cooking and swimming ok so let's move these items you see it is really easy as ABC just drag and drop it to the desired position okay guys let's proceed to the menu item content to do this you need to hover the needed item and you see the blue jet manual label appears click on it unable the Magus of menu first if you haven't done this yet here here in the item icon tab I'd like to apply a new icon to highlight it in manual I mean to highlight this item and let's change its color to the croco one alright let's add the beige as well guys beige it could be really tiny attached that works really greatly when you have many iron anyone emphasized for example some new items some transient for the shop beige sale works perfectly it really draws attention okay now to add the content itself click Edit mega menu item content here as you can see the Elemento page builder opens with all the available widgets in the panel you have you are free to add any of them really any it could be as on a manner as croco widget customize the settings play with the style just take your time and enjoy this protests guys imagine that you've done all the manipulations from the backend so you have the proper menu item structure you have the fully set footer and template so the next step you should do is to proceed to the let's proceed together to the animator page builder to your page desired page where you want to put your menu so let's find the hamburger menu widget okay drag it and drop to the desired position on the page in the options section choose the menu you worked with previously then select the needed menu from a pile if you have let's click on our menu you see I have the menu without header and footer right now and I'd like to add this really necessary elements so the before item content here yeah you see it is before item content is our header and the after item content is our footer that we just a bit edited before so let's add them now let's decide on the left or the right container position so right now it was right let's do it left as you can see we have here the breadcrumbs enabled already so it really simplifies d negation actually let's change the menu icon to draw more attention again yeah huge variety of their icons actually guys and you can choose you can pick anything okay show up the text of the toggle to highlight again the menu if you want to I'll put it here some pretty silly dummy text by the way here you can toggle off the iron mic on no need to go back to the dashboard to change it the same is with the beige with the description and the divider so you know you can toggle on and toggle off guys and let's proceed to the style tab you've been waiting for it for so long so let's check it out we have four tabs toggle container items in advance so in toggle styling options you can edit toggle itself and if you enable toggle text you can edit it as well for example I changed the color to the croco I have here okay you can change the icon size and you can change the toggle color all it's pretty clear all is pretty functional so the next is the container styling options here you can style up the container icons the container breadcrumbs and container box itself you can change its width so what that what I need right now I can do it a bit wider and by the way you can change the background to the image one guys the next is the items tab so here you can style up the size of the icon its color the position the labels beige a sub menu button in different states in normal hover and active guys if you start editing the labels and pages in the element page builder these settings would be applied to all the pages and to all the icons that you have done here but if you have like me some special beige and special icon that I added from the backend to change the color to change the typography you should go back to the dashboard and edit this separately okay so let's see on the Advanced Settings so we have here the loader color and the cover color let's change them right now to the chrome okay guys I hope I didn't confuse you with my styling taste but I hope that you now have the idea what are they styling site is for our hamburger menu widget to sum up guys you have to make the most of the hamburger menu widget you can add any content to it to make it bright and juicy and let your visitors not to get lost in your web navigation thanks for watching this video you'll like it and give it a like subscribe to our YouTube channel and visit our friendly Facebook community may the croco block power be with you Papa guys .
01:00 What is the Elementor Hamburger Menu widget? ????
01:18 Menu Structure
01:51 Menu Templates editing
02:52 Working with the menu items
05:23 Content settings in Elementor
07:00 Styling Hamburger Menu in Elementor
Learn more about JetMenu plugin on our website
Check out the JetMenu tutorials in our Knowledge Base:
Join us here:
► FB Community:
► Linked In: