The new Pro Menu Element in Oxygen builder (Full review)

in this video we're going to see the pro menu element in the oxygen 3.2 version hi my name is Todd O's and I'm constantly producing video tutorials about oxygen and other WordPress tutorials so please subscribe to my channel if you're in that content so recently the 3.2 official version came out from for oxygen and the new element is the pro menu element which we're going to review and we're going to see how it works so this is a template ready template for the from the oxygen team and I have already opened the main template which grabs the header in the footer so if we click here we're going to see that we have the main menu element this is the old menu element and let's see in the front-end how it looks here is the page and as you can see let's make a refresh because I haven't done refresh okay here we have the about and beneath about I have created two submenu items and let's see how it looks from a mobile version this is again the old one and as you can see here I cannot see the submenu items now in the old menu I had to go into the mobile responsive then to dropdowns and then include dropdowns links in the responsive menu if I check this and click save and go to the front-end this is the mobile version of course and refresh I can check here and now underneath the about I can see our services and doctors but as you can see they're always displayed there are not child items in the about and when I click the about I can see both of them they are always there there is no toggle feature so what we are doing before that is we're using a plugin from github this is the plug-in from the W peel it member and here the member of the David David Brown has created a plug-in that allows to toggle the Minu functionality in mobile version so we're going to go into the plugins and we're going to activate that and now if I go to the front-end again in the mobile version do a refresh here I will click and I will see that I now have this icon where I click this and I can see now the child elements of the menu now I'm showing you this because if you have already installed this plug-in which is great for the version and this element you cannot use it with the new prom a new element and of course there is no reason to use it because the toggle option is available in the pro menu but if you already have this plug-in you will see that you will have a problem if you have already activated so this is why I'm showing this let's go into the backend and here we're going to structure we're going to see that the menu is in the row right of the header row so here we're going to add the pro menu okay and then I'm going to the menu and I'm going just to hide it so I'm just hiding it because I do want the menu to be here just for references so if you had already created a website and you had the menu here you can just hide it so you can go later on and see what was the settings that you had what was the text style the phone weight the spacing the phone size and everything else do not delete it just like that so let's go to the pro menu and as you can see here we have the pro menu I'm going to save it now and I'm going to refresh it in the front-end let's that and as you can see here the icon the toggled icon for the blog for the about sorry is way too big now this is not something that it's oxygen fault this is because the plugin that we talked about is not compatible with the new version so I'm going to the plugins and I'm going to deactivate the oxygen mobile submenu and I'm going to delete it as well because I don't need it anymore let's go now to the front-end and I'm going to refresh and we will see now that the menu is looking not fine but better than it was before so here let's go back and now we're having the prom menu choices here first we're going to select the main menu of course since we all we only have one menu it will grab that menu and here we have to select the the width of the screen that we want to have the menu toggle for the mobile so this is just something that you have to see how it looks and see one you want the mobile menu to break the menu to break to a mobile version it depends on how many elements you have in here in the menu and the space and all the settings and how big is your logo and everything else so let's go for less than 99 - in this and we will see how it looks so after that we're going to start building it but before that you can see here that says use preset oxygen team has already create some presets for you so you can select some of those and start continue building from that point let's select this one this is slide to write the name so I'm going to click it and as you can see it's slides - right then we have the desktop and mobile so you have something like this ok we have two icons here but I think it's just a bug or something if i refresh the bates maybe it will they will go on and it will remain one arrow we have the testicle vertical as you can see here we have the minimalism which I have to click here and I get a full page menu and all the settings that you see all the preset that you can choose from here we're going to start from a blank so I'm going to click the reset click current style so it will reset to the default like that keep in mind that this is the first version the first official version for the pro menu so you will have some things that you will dot like we will find some things I have already supported two things that I wanted to change and I'm sure that they will develop a little bit better this element so let's start by going to the desktop menu now as it says here you are going to style how it looks this one without the dropdowns for the version that you have in the desktop so let's go topography first we're going to teach to choose horizontal or vertical so we're going for horizontal as it is already but if you want you can go for a vertical so then we're going into the topography and we're going to select the phone family of course you can select the default which will grab the default from the global settings and if you don't you can choose another one let's go for a Roboto which I really like okay this is the Roboto then we have the phone sighs let's go for 16 let's go for 17 okay something like that then the color I'm going for a black color and then for the font weight I'm going for 600 something like that after that we're going for a letter spacing and let's go for 2 and high in line height 1 if you cannot from some region cannot access the letter spacing this in some cases has happened a when I use the preset then just go and type in the line height first and then you will going to be able to type in the letter spacing so after that I don't want any uppercase or anything if you have upper cases here this is the thing that is selected in most priests s presets I think the uppercase selected so after that let's go back and then we're going to the spacing now the default for the menu was 20 and 20 something like that and you can check it out by going into the menu and then spacing now 15 and 15 or 20 sorry so let's go again to the desktop mile spacing and align and let's go for 15 and 15 now this why I told you not to delete the menu so you have something like that in this case Italy it looks a little bit way too much space in here so let's go for at 10 and 10 maybe it's a little bit better yeah 10 a 10 it's quite all right okay and then we have the margin for the items this is the items inside then we have the item text-align which can be Center right or left of course in this case it will not change anything but if you create a menu that will go and stretch you can go and align them how you want okay so let's go into the next and we have the border radius this is if you have something like background and you have the what white menu or we we have a background in the menu itself we have a grey grey menu or something grey background so in this case we're not going to see any border radius because it's a white to a white background let's go back and hover and activate it and this is the hover text color when you hover what color you want to see let's go for a blue so when however I want to see a blue okay then we're going for the hover background color I don't want anything for that hover board their top let's go for one pixel and this will grab the color from here okay so when I hover I will see a line above then we have the hover board the bottom I don't want anything an active text color I will go for something like that so this is the active now the homepage and the active border top will go for three pixels it would be nice if I had to choose the left and right also and if I could create something like a shadow backlight shadow or something so after that you can select the transition duration for the hover effect and let's go for 0.3 keep in mind that this is in seconds not milliseconds so you can have a nicer transition effect okay something like that let's go back and now we have finished with how it looks in the desktop for the menu then we can go for the dropdowns these are the dropdowns when I hover over to the about page and by default it's enabled because we do want the dropdowns the border radius I don't want any and then we have the animation type this is the fade up which I don't really like let's go for just a fade okay something like that then we have the boxed shadow let's go and put some box out just to see where it appears so let's go for 0 0 and 10 and 10 so it's it will you can see where it appears it's in the box of the whole drop-down and of course if you want to add some shadow just go for 0.3 or something and here five and five so it will be not so you cannot see it very it's not a Glee sorry for my English okay so let's go to the next one and this is the drop-down icon this is the icon that we have in here so let's go for the job type icon and now with the version 3.2 we have the font awesome five free icons embedded so we can choose anything so let's go for an arrow double are you can select something like that or we can go for a triangle no we don't have any triangle let's see what we can put just change the icon something like this how what's the the name of the icon okay save run okay so let's go for save one and this one as you can see the icon immediately changed and let's click in the first out of those lets go into the color or something so I want those two clothes okay it's not closing but doesn't matter let's go for color as you can see it's already black but you can change it so let's go for black okay and then we have the size clearly I want a smaller size let's go for 25 no 2010 ah 10 I think 10 is quite okay then we have the icon margin so you can set some margin top bottom left right and icon space so here you can put the space from the word about so let's go for the icon space and let's go for 10 pixels it's a little bit way too much okay let's go for 4 pixels something like that after that if you hover over you can see that it will not rotate but you can send a rotation here let's go for 180 and no here is zero because I don't want the rotation to be all the time but when it opens I want 180 rotation so when I hover it it will rotate and you can see how it looks then this is the transition duration for the rotation it's 0.4 it's looking good I don't I don't think it's ugly at this moment so let's go back after that we have the drop down colors let's go for that and as you can see here we have the background which is a background color of white and it's a little bit here we we have to select this is transparent it's not white so we have select white if we don't want transparent so now we have a white okay then we have the hover background color then we have the link color which we want to be black and then we have the text our color we want this so now we have also the hover color as you can see I cannot select it right here but if I save it and go into the front and I can see how it looks and here I can hover it okay after that we have the tiled links drop down and we can give them a little bit of space low so let's go for 10 and 10 okay it's better I think it's better than an 10 then we have the font family font size for the drop downs so let's go for a sixteen to be a little smaller than this that world that were seventeen font family Roboto the colors should be black again and the font went let's go for five hundred so something like that okay it's looking good then we have the light the line height and the letter spacing which I'm not going to change anything about that and that was all the settings that we had for the desktop version okay this was all the settings now we're going for the mobile version now keep in mind that the mobile version is best changed if you have also a mobile in front of you make some changes and then go into the mobile device and see how it looks from a real mobile device do not depend only how the web browser shows you in the mobile version also I want to see something here as you can see of course we can use some presets but also we can save to a new preset so I can see here and save this like a dentist or something and I can save it so I will have the desk dentist preset but keep in mind that if you click elsewhere and then you go back to here you will not have the preset selected okay so this is like a bug or something it should be selected the dentist and then continue building to that you cannot continue building to that preset once you leave it okay once once you save it you cannot continue building to that and you cannot save to the dentist again you have to delete it and then create again a new dentist preset so keep in mind that because it will be something it will be fixed it will be improved but at this point you cannot do that first finish the layout for the menu and then just go ahead and save it as a preset if you want so after that let's go for the mobile menu and here we have the open icon layout let's go into the mobile version and see how it looks right now let's go and rephrase that so right now we have something like that because I haven't select how it looks if I want to be I think the breakpoint is a little bit off but I want to check it out let's go sorry not here let's go here and see where it breaks - a mobile version yeah I haven't select anything because I had selected elsewhere so let's go again into the mobile version and let's select the nine-nine - okay let's save that again and let's go in here and refresh okay now you can see that this is the mobile and this is how it looks okay so let's go back and start building now the desktop sorry the open layout icon at this point it's looking like that but it's not this is what I selected in this version in the desktop version so you can see that it's clearly not having this same icon but it doesn't matter when you change it you will get the same icon let's do it something like that so we don't have to change every time I don't really care about how it looks here so I'm looking here so let's go and choose another icon I'm going to delete that and I'm going to select another icon let's for the standard bars okay something like that okay so I chose the bars and let's save that and refresh here as you can see now I have this bars as an icon next we have the menu text whether it says here menu you can select whatever you want and then the icon size I want a little bit smaller 25 the margin above are quite okay the margin below are quite okay I don't want to set any margins and margin right so we can separate that from the words menu I need four pixels or something let's save that and refresh the page okay as you can see now we have some space in between again do not depend how it looks here go for a mobile and your will be sure how it looks okay I can color we have a little bit of gray not so black but I want black and when I hover I don't want to change because it doesn't matter when you are in the mobile you cannot hover you can only click so let's go and refresh to see if it's now black okay now it's black and then we have the padding hover color did I forget anything padding color no and padding hover color the padding color is the background let's go and change that to see what it is okay and let's say that it's it's nice to have a little bit of gray so we'd grab the intention and you know where to click so not of course so much of a gray but something like that let's save that and refresh okay as you can see now it has some space and it grabs the attention of the visitor and of course the padding is how big you want this square to be if you go for a 10 it will be a little smaller let's say that and refresh again and as you can see it's a little smaller now we will leave it as it is then we have the parting hover color so when you hover you will have something else of course we don't have any hover in the mobile version but we're going to do it just to see what it is when however I will see this red okay did I forget anything I can hover call no I haven't forget anything okay then we're going for the border radius which now we can set because we have a background color in here so let's go for 20 and see how it looks let's save that refresh and now we have something like that which is not so good let's go for 5 I thought 20 was way too big ok so it's a little bit better ok maybe 8 and I will remove that save and refresh here something like that ok and then we have the icon transition duration which is the seconds that you want the transition to take the time you want from when you hover ok the color that will change let's go for the next one which will be the icon topography and when it says the open icon it means that you haven't checked if you haven't clicked here so those are when you haven't clicked inside we have the font family for the menu let's go for a robot again ok and then we have the phone sighs let's go for I think it's this is a 15 yeah this is I think a 15 let's save that and see if it's a 15 I thought fifteen so let's go for sixteen to have something little more bigger okay and then we're going for black color because this is not black it's a little bit of gray and let's save that and refresh okay something like that then we have the font wait I will not change it and then we have the text align line height and letter spacing I'm not going to change those it's pretty simple what they do let's go back and then we have the close icon layout let's open here and let's click here so this is the icon that we have the X and then we have the word close so here we have bars as it says but if I change this to something else we will see that we have the menu change the menu changed as well so let's go and search for the X is it exit or something no is it X okay I don't know what is the name of this icon exit escape so I will change it to something like that so if I save now and refresh the page and open it up I will see now that I have this icon okay and then we have the icon text which is close and I want the clothes to have a letter a capital letter first letter capital close so it's close to the menu let's click once again and then we have the icon position top how close this to the top let's go for 15 and then we have the icon position left so how right is from the beginning of the screen let's go for 15 again okay and then we have the icon size now here it's better if you choose something that's close to this icon of course you don't have to put the same size because it's the same icons this is square this is circle so we have something else but be sure to put something close to that so I need a little bit of a bigger icon let's go for 20 then we have the margin above and below margin right color if you want to put some gray so you can see how it looks and these are all the same settings that we have in the open icon so let's go and save that and refresh the page again let's click here now we can see that we have the close and here is the word now I cannot change how it looks here I cannot put the I cannot put the icon next at the right of the word because in some cases you would like to have the close first or something I cannot change the order here it would be nice if I could then we have the close icon typography so let's click that and of course this is for the close word the font size I think it's okay the color let's go for a little bit of black and then we have the text a line letter say a letter spacing line height and everything else let's go and save that and refresh again and as you can see now we have the black color here I need to put a little bit of space in between so let's go for the icon close icon layout and let's go for icon size margin above margin right let's go for four pixel four pixels okay refresh and okay now it's a little bit better so after that we can choose the menu styles now this is if we want to put the off canvas and as you can see now when I click here I will get the whole screen I can not change to anything else but the whole screen and if I want I can select the off canvas let's select the off canned ones and let's save that and refresh just to see how it looks with the of canvas enabled so as you can see now I have the menu here from the left and here you can select left or right let's select right save and refresh again here the menu went to the right now I want to be in the right because most people are right-handed right-handed yeah so when they operate the phone they use the right hand and I want them to be able to select the menu with one hand and then can select which page they want to go so my first choice is right of canvas menu then we have the animation I can go for a fade left is it the right one let's save and refresh select it and yeah fade left so you can see how it looks or you can go for a slide left let's go for a slide left and not a fade so this slide and not the fade as you can see here I also I would like some option if I could to push the whole page to the left when the menu opens of course I cannot do that in this version at this moment this is the duration and the time that we will get for the slide effect to complete and this is the background of the whole menu let's go for a little bit of great just to see how it looks of course it's not something that I would change but we're going to see how it looks and now we have this grace which I will delete because I do not like it at all and then we have the text color the link text which is black and I will select black also and then we have the hover color of course this is when you hover here but we do not have any hover inside a mobile then we have the link padding so we have the padding for the items here and you can go for a little bit more if you want and then we have the content the container padding which is the padding for the whole container let's go and save this and we're going to see how it looks when we put some padding inside okay so now the icons are a little bit apart so let's go for five let's save that and now you can see that they have a little bit less of space I like how it looks right now and then we can have a padding in the container let's go for 50 and 50 and let's give it a little bit of background color let's say that and refresh and nothing happened I think this is yeah it's a padding not a margin so I will choose how I want to see it from the top and the bottom okay so I now pushed everything from the top because I put here 20 pixels of padding from the top of course you can put some from the right or the left and you will have a little bit more space inside here let's go for 50 and 50 and let's delete that and let's save that and refresh the page here okay and now you can see that I have more space here in more space here let's delete that or I will put something like five and five here and here let's go 4-0 so it will be exactly in the middle let's say that and refresh the page and now as you can see I have a little bit of space here and I have a little bit of space here and it's in the middle of the page let's get rid of the background color okay and let's save and refresh okay now the item alignment is where you want those to be aligned now they are in the left but I can go for center or right I don't like any else down the left but let's choose the middle and we will see how it looks so this how it looks in the middle okay I don't really like it I like better in where it's in the left let's save that and refresh again and now we have aligned them on the left let's go back and then we have the typography now this is the typography of course for the mobile version and here we have the phone family the phone size where I can go for 15 or something colour should be black the weight I think it's a little bit off let's go for 500 let's save that save and refresh the page here okay I think these are a little bit better probably I would go for a little bit of smaller clothes here I don't think this is really nice so after that you can select any other things that you want from here it's very easy and let's go for the next which are the mobile dropdowns let's go and here when I click I will get this toggle effect which is this one you can so in line so they will always be available without clicking let's go and see how it looks as you can see our services and our doctors are always sewed and when I hide it I will see none let's go for toggle again let's save that refresh and see how it looks yeah and when you hover and click you will get these sub items now the thing that I really don't like not don't like but it's a bargain it's a really annoying bug is that you cannot click in the about and have the child menu opened so I'm clicking the about page let's go the mouse here but nothing happens I have to go here and then click and as you can see once I click it here they will it will open so you have to click the icon the arrow or whatever you the icon you have selected you cannot click the about element you the about word this is something that really annoys me so I hope they will fix it soon after that we have the animation duration how much time it will take for the effect that it will slide out and open and then we have the drop down icon size this is the drop down icon size it's I think it's ok it's not way too big it's not way too then we have the background color of these elements and let's go for a little bit of gray but not so good so gray let's go and refresh the page and then let's click here no so so you we have a little bit of gray but not too gray let's go for a little bit of nan-oh varsity's so let's save that and see how it looks ok so this is better and then we have the width of this drop-down border this is the line of the border okay the color and then the style and of course you can select something like that to remove it completely you cannot select to hide it you have to select color that it will not show something like that ok you cannot remove it if you won't remove it you have to select the color that you will not show so let's go again for the black it is really not so annoying I can leave it there and of course I can select the width so it will be not for the whole screen for the whole menu not the whole screen so after that let's save that and refresh again just to have that bar okay this one and then we're going to the next one which is the desktop sorry in the mobile dropdowns no we have finished that was all this is the mobile drop downs and that was all that we had now as you can see here we have the effect that I chose the home and when I hover to anything else I can see a line here and when the home is selected I have a blue line here now this can be removed in the mobile version by going into the less than 9 9 2 which is the break point of my menu and then going into the settings so let's go to the desktop menu let's go to hover and active and now when I have the active where is the active boarder top I can set to zero let's go and save that and refresh the page here and now selecting the menu I do not have the line here I have only when I hover but of course I don't have the hover option in the mobile version but if you want you can select zero also here so this is nice that these settings are separated in the mobile version here so you can set something else as you can see and of course I would also like to have here some options to add some buttons or something else maybe you have also want to add a login button or something that you're not going to need to be displayed every time in the in this page in the mobile version but you want someone to click it and then have a button inside here this is something that I would really like to be able to have to add to the menu mobile version something different another element or something and of course it will be nice if I could do it in the desktop version but in the desktop version you can put it next to the menu and it will be great but here that we have the off canvas we need something to put here inside the menu so that was all with the settings I hope I have give you some advices I hope that I have cleared some I have make you understand how it works you have to play with it you have to see how it everything are working and then when you're finished you can export that or import that to another website this is very good that they have but you cannot select the preset that you was giving again so I have to go here I have to save it as a dentist 1 or dentist - I don't know then just do save it and then I can go to the dentist and I can remove it I can delete the dentist from here and then use the preset of tends to again and save it and hopefully it didn't change anything yeah I think I'm okay so that was all for this video hope you enjoyed it please subscribe my channel if you like content like that thanks again guys and I will see you on the next video bye

Channel: Stratos Tutorials

Views: 1,948

Keywords: The new Pro Menu Element in Oxygen builder (Full review), pro menu oxygen builder, how to use the pro menu in oxygen, pro menu tutorial, oxygen builder menu tutorials, how to create a menu in oxygen builder, pro menu step by step, pro menu review, oxygen review

Id: Caic_fsTY0I

Length: 43min 20sec (2600 seconds)

Published: Fri Feb 28 2020