Create a Mega Menu in Oxygen Builder

hey everybody welcome back to a plague written episode of premise lug as you can probably hear in my voice i'm not feeling all that well but i have a lofty goal this month to post more frequently than i have been and somebody asked me to work with the mega menu in oxygen version 3.7 so i figured why not make a video on that so i went out looking for a couple of mega menus that i liked and came across evernote which is pretty simple but i think it will be a great demonstration for us to kind of modify the included composite element and kind of see what we can come up with so on the evernote website they have a pretty standard looking header this y evernote button is basically just a simple link and then these other two here have that nice kind of mega menu effect so we will recreate basically this whole header up here and really the only air quotes challenging part of this is going to be creating the layouts for these two mega menus which thanks to kind of the baseline that the composite element gives you is really not going to be that hard before we get started i wanted to mention that the shortcodes for this particular tutorial are going to be provided for you if you're a premise log member so if you want to skip this and basically just get right to editing what we have in the completed version you can click the link in the description below and get the shortcodes for this particular reusable part and get started using this right away so i already have an oxygen install over here with some page content created and right now where i am is my site-wide template of course because i want this to be the main header across my entire site so what i'm going to do is start off by clicking the body so i get to the top of my structure panel over here and let's go ahead and just throw in a div we're going to use that as our header of course it puts it below my inner content which is not what i wanted so i'm going to stick it up there now i'm going to set this div's width to 100 and then we'll change the tag here on this header to header inside of this div i'm going to add in another one that's effectively going to be our container here so that we can set it to a max width and have it centered so let's go take a look at how wide this content is here we're going to be doing a lot of inspect here in the structure panel so this header row its width is set to a max width of 1220 pixels so let's just go ahead and do that on this div here we're going to set this to max width of 120 and then i'm going to go margin left and right auto so it sticks us right there in the center now we'll worry about some more alignment later on as we kind of get some content in it but for the moment i just basically want that to be our max width of 1220 and have it centered so we're on the right track here i'll try to keep my structure panel expanded here so you can see what we're doing and let's go ahead and just rename a few of these things so i'm going to click on rename here and let's just call this one header wrapper and then we'll call this one header row and i'll try to keep up with naming this stuff so it can be pretty simple for you to see what element is what so now inside of this header row let's go ahead and toss in an image element and then i'm just basically going to take the image link here and then we're just going to paste that in our image url so that's perfect makes it nice and easy now of course you wouldn't want to do this on a real site because you don't actually host that image but for this example that's the way that i'm going to roll with it i typically like to make my image elements linked back to the home page so i'm just going to link that and go slash home like that so now our logo image is clickable and it will take us back to the home page so moving back over here we have the first link here which says why evernote and then we have these other two for the actual mega menu component so i think what we'll do here is just start off with a text link element for this y evernote which we may need to change possibly but we'll just stick with that for now so let's go ahead and just take a look at this mainly what i'm looking for here is where is that margin applied underneath the text which pushes that green border when you hover down below it so it's actually applied to the li item here there's 24 pixels of padding on the bottom of that link wrapper so we can basically just achieve that ourself so let's switch over here to oxygen and i'm going to go back to my header row container here and i'm going to add in a text link element let's go ahead and just add a class here we'll just call this like ps header link or something like that and then our text color here we'll just set this to black because i think it's a full black color and then our hover is the green which i already have set as a global color here now on this there was 24 pixels of padding on the bottom there and then there was a hoverboard so we're going to switch over here to the hover state and then we're going to go to border bottom we'll set this to 2 pixel width for the moment we're going to set this to solid and then i'm pretty sure there was a transition effect on that so let's take a look real quick here so we'll just go ahead and set a transition effect to that element and we'll just let it do its thing not really too concerned with making this absolutely perfect so we'll switch back over here to the original state we'll go to effects transition 0.3 is what they used in a couple other places for their transition duration so i'm going to stick with that and then we'll just go ease in out and so now if we hover over this we should have that border but in fact we actually need to go set another border so we don't have that little jump as you can see it pushes that content down ever so slightly so what we're going to do is here on the original state go to border bottom we're going to go to width of 2 set that to solid and we're just going to change the color here to white so it effectively blends in so now when we hover you can see that the border is there and we don't have that effect where it pushes the content down so that's good all right so the other thing on this header row so we can kind of get the alignment set up here is we need to set this to horizontal and then let's take a look at some of the spacing over here so what do we have on the image element is there some margin on the right hand side or are they just using flex to push the content out so actually what they're doing is they have the links in another container which makes sense for us and then there's margin left on that of 50 pixels as you can see so let's go ahead and do the same thing here i'm going to take this text link and i'm going to wrap it with another div this div i'm just going to rename like link container or something like that and then we're going to stick 50 pixels of margin on the left hand side to push our links away from our logo and then over here the first link was called why evernote so let's go ahead and just pop that in why evernote and then those are all caps so let's go to our class here we're going to go to typography and change this to uppercase and then the font weight was a bit bolder so let's jump it up to 600 or 700 i think 700 is a bit too much 700 looks okay so we're just going to stick with that so just a couple other things before we add the mega menu here let's go to the header row that we have and we're going to set this height to 80 which is what it is in our example and then we have the align items set to center so we'll just set that to middle like that and then as you can see this is definitely slightly off but what they do here is basically they take their link container div and then they go to the height section they set this to 100 and then on this link container div they set it to bottom alignment so then the text is in line with the logo and you still have that border effect pushing down to the bottom which is pretty cool all right so next up on our text links here let's go ahead and set that margin on the right hand side to 24 pixels and now we can go ahead and add in our first mega menu element so what i'm going to do is click on this link container we're going to go over here to add we're going to go to wordpress and then mega menu and this is of course the oxygen composite element available in version 3.7 i'm going to click on this and immediately you can see it is off our page so let's go ahead and fix that so what i'm going to do here is go back to our header wrapper i'm going to add in another just basic div and then i'm going to expand the mega menu here i'm going to go down to the mega menu wrapper and i'm just going to get it inside of this div right here so we're going to add a couple of these wrappers inside of this div later on so this is just good for organization we're going to go ahead and just stick that in there and then i'll get rid of my text element there now so these mega menus are visible on the back end but of course on the front end it's going to behave like we expect it to so let's do a little bit of renaming here so i'm going to change this div's name to just like menu container or something like that and then one other thing is i'm going to take this code block here and i'm going to stick it up because we only need one of those so we don't need to duplicate this every time and later on when we duplicate these menu links here we don't need that code block to duplicate itself multiple times even though in oxygen 3.7 it's not going to render that code multiple times still i just there's no reason to have that multiple times so another thing we can do is we don't actually need this wrapper right here so i'm going to take this link and stick it up right there and then just get rid of this div so our second link in this menu here says feature so let's just go ahead and change this and then i'm also going to rename it in the structure panel so we'll just call this features and then i'm going to take this mega menu link and i'm going to add our class that we used to style that other one so it was ps header link so now we have essentially the same thing there is a background color that's coming from the built-in class here so i'm going to get rid of that and then we also probably have that in the hover state here so let's go take a look background color yeah we don't need that in the hover state either on that default class so now what we're going to do is go back to our link container here we're going to set this to horizontal alignment and then let's just go again and set this to bottom like that so there we go now we're kind of back to where we were alright so next up there's one more thing it looks like we have some padding on the left and right side of this text here and i think that's coming from the default mega menu class here so let's go back to that and then i'm just basically just going to delete all of this padding so that our padding is coming from the class we used earlier ps header link and not that default class there so that that looks much more in line with what we're actually trying to design here so now what we're going to do is inside of this link wrapper that we're working with you can see we're inside this mega menu link i'm going to go ahead and add an icon element so let's just add the class of like ps header icon we're going to make this much smaller so like 20 pixels and then i'm gonna see i think we want chevron down is the one yep and then on this link wrapper we're gonna set this to horizontally align and just middle is gonna be good and then that icon i think is even too big there let's go 15 and then let's set like five pixels of margin to the left hand side to space it out just ever so slightly and then let's see does it inherit our green hover color it does not wow so that was a bit of a doozy i couldn't for the life of me figure out why i couldn't get this green hover color to be inherited when i hover over this link wrapper on the icon the text and still show the border and so basically what i ended up having to do is on these text and icons i had to add a class so if you look here on this text i added the class ps hyphen header hyphen mm hyphen link and then on this icon over here i did ps hyphen header hyphen icon and the reason i added a class is because we're going to duplicate this so if the ids change i didn't want the css that i had to add not to apply so basically what i did was go back to the mega menu code block in this css i just added a super simple line of css that i can share with you and basically i just targeted the class for that mega menu that's there by default and then just set it on hover to have that color so nice and simple but wasn't immediately apparent on how you do that but now we do have that hover color so that's one of those little things you might run into that can sometimes just hold you up that took me longer than i care to admit to figure out so anyway we are now making progress so what i want to do at this point is go ahead and duplicate this link here so i'm basically just going to hit duplicate and then the next one here was called plans so we're going to call that plans and then i'm just going to rename this and then what i need to do now is duplicate this mega menu wrapper so i'm just going to clone this and of course it does show up twice in the back end but on the front end it's going to work perfectly fine now what we need to do is go into these elements and change their attributes so the link targets the correct menu wrapper so basically what you do is right now i have the second mega menu wrapper selected so i'm going to switch over here to the id of the element go to advanced attributes and i'm going to change this id to 2 here and then i need to go to the corresponding mega menu link here and do the exact same thing so this is my second link i'm gonna switch to the id go to attributes and change this to two so we're going to apply this and just for the sake of example let's uh just like delete this button and delete this heading and let's save and go take a look on the front end so now if we hover over this one you can see there's the default one there and then if we hover over that one you can see it's loading up the second one because of course that button and the heading that we deleted are gone so we are definitely making progress here pretty exciting now if we go back over here and take a look at evernote under the features we have basically a four wide row of icons heading and a text element so let's go ahead and set that up and then plans is pretty similar except it's three with some pricing information and a compare link so this features one is going to be pretty straightforward all right so we need to change a lot about these mega menu setup so basically let's take a look at what we have so far so right now we have our mega menu wrapper with a columns element and then this icon is what shows up on mobile devices to close it so if we drop down a bit let's go to less than 992 and there you can see that icon pops up it has a class attached to it as you can see right there so you can actually make anything you want the close button it just needs to have that class i'm just going to leave that as is for the moment so let's step back up to the all devices screen width and just to make this nice and simple what i'm going to do is inside this mega menu wrapper i'm just going to add a new columns element so we're going to go columns 25 width and we're just going to delete this other one i don't want any of the stuff inside that inside of this first div here i'm just going to add my own div and i'm going to add a class to this so let's call this like ps menu list item or something like that i'm going to set this width to 100 inside of this div here i'm going to pop in an image element and then i already went ahead and uploaded all of these images as you can see so if we go back over here under the features the first thing is sync and organize with a little piece of paper so let's find that there we go and then over here on the right hand side what i'm going to do at this point is add in another div i'm going to call this one ps menu text container or something like that i'm probably not naming these classes like the most consistent thing ever but it's going to work for us which is fine now inside of this i'm going to add in a heading we don't need an h1 let's drop it way down to like an h3 so let's switch back over here real quick and take a look at what it actually looks like so this is pretty small let's figure out specifically what it is so it's actually an h4 since it's black and a font size of 14 pixels so then on hover what does it do so it changes green so everything gets that gray effect on hover and then it's got some padding on there so if i open this back up and we take a look here at that main wrapper div how much padding does it actually have so it's 16 everywhere and then let's see what that hover color is so it switches to a background color of f8 on hover okay so let's go back over here we're going to change this heading to a h4 font size is 14. i feel like that's really small but that's what it says it is it has a margin bottom of 0.5 em so we're just gonna basically do that here as well the heading said sync and organize and actually i am not doing this on a class so this is a perfect opportunity for us to use the copy styles function so we're going to go ps menu list item heading super long class name but whatever it doesn't actually make a difference so i'm going to copy that to this class and then delete the styles in that id that way if we need to make a change to these headings in terms of their styling we don't have to do it to every single one we just do it on this specific one so uppercase on that heading there and then now let's add in our text link excuse me not text link just a regular text element so the color here was just gray once again the font size was 14 and it says keep your notes handy here i am again not doing this in a class so let's go ps menu list item text and i'm going to do the same thing just copy the styles to the class delete it from the heading and there we go so now if we need to make a change once again we don't have to worry about doing it multiple times so what i'm going to do here is choose this list item div that we have we're going to set this to horizontal and then i believe it's probably middle aligned like that so let's take a look it sure is and then what we need to do is set our padding so we're going to go 16 pixels of padding all the way around and everything is a bit scrunched here but we'll fix that in just a little bit then on this we're going to switch over to the hover and then the background was f7 i believe and then we're also going to switch back to the original state x transition 0.3 ease in out is the timing function they use so now when we hover over this anywhere in this div which is a little clunky on the back end but you can see it all does work in fact i think the background was f8 because you could see the background of that icon ever so slightly so let's switch to our hover state go to background and then f8 we'll try that and yeah you can still see that icon ever so slightly i think the only other thing for us to do here is to basically take this div that has our heading and our text and apply some left hand side margin over here so they've been using 24 pixels of margin so we'll go ahead and stick with that before we do anything let's save and take a look at what this looks like on the front end so far so it's way off to the left hand side which we do probably want to fix here because in the real life site when you hover over the features first of all you have a box shadow so it lifts it up off the page that whole container there but also it's more centered so we can pretty easily fix that so we actually need to go all the way back up here to our menu container and let's set this to a width of 100 and then i'm just going to set this to center and then now what i'm going to do is go to mega menu wrapper here we have this class assigned so i'm going to go to effects let's go to box shadow and then let's go take a look at what their specific box shadow is here so the box shadow is actually inset which i don't typically use that's kind of interesting 0 6 10 black at 10 okay so we're going to go inset black 10 and then it's 0 6 10 0. and so now let's take this and we're going to duplicate this a couple of times and let's stick these containers in our columns so we can kind of see what we're looking at here here i am with hydrogen pack installed and i'm not using the copy and paste feature just because old habits die hard so we'll save this refresh on the front end and look at our features so we're closer but we need to set a background color because of course you don't see the heading and stuff bleeding through on the real site and everything is not completely full width like this so let's go back over here real quick how wide is this stuff so it's the same width as the header so 120 pixels so let's go back over here to the columns we're going to set this to a max width of 1220 and then we're going to go back to our mega menu wrapper so we'll go to vertical and center and then let's set the background color here just to white and now i think if we save and take a look on the front end we're going to be pretty much where we want there we go that is almost exactly it so there's a little bit of box shadow that we're missing down here on the bottom but we can fix that in just a moment so let's go ahead and duplicate this row so we have our second set of four switching back over here all we need to do is basically just duplicate this column and then i'm going to change these real quick to actually be what they are on the front end you know all these headings and icons and i'll be right back okay so i got all these texts and icons updated and you'll notice one thing that differs from our example here to the actual live site is these headings are often dropping to two lines and one thing i noticed is that these divs here aren't exactly the same width as they are in the real example so i'm going to try to go here real quick making sure that i have my class selected i'm going to set the min width to 290 pixels and that does solve our problem hopefully we don't have overlap issues here because of course we are using the columns element here in oxygen we might have to go to every single div here and set the padding to zero which i think we are going to have to do which is pretty annoying but unfortunately that may just be a little nuance that we have to do so i guess that's totally up to you i don't think it's actually going to affect anything on the front end so let's save real quick and just take a look so yeah i actually looks perfectly fine i don't really notice any issues so if you're someone that really cares about details like that you could certainly go ahead and do that but to me this looks perfectly fine the only thing we're missing is the box shadow on the bottom part here so let me take a look and see how we can get that okay so in order to get that second level of box shadow you will have to do it with a code block via css so just as a simple fix what i'm going to do is on this mega mini wrapper making sure you have the appropriate class selected i'm just going to set a border bottom so solid one pixel like that save this let's go take a look on the front end and that looks perfectly fine to me so i'm really happy with how this looks this looks awesome now the only thing now that differs between our example and the live site is there's some spacing beneath this but all we need to do is just go to the second column here and we can just add like 24 pixels of margin beneath that and now we are pretty much good to go that is our mega menu done for this features section so our plans of course needs a lot of work but what i'm going to do is basically just duplicate this whole section over here into the plan so we can save ourselves a lot of headache so let's go back over here and this mega menu wrapper is our second one i'm essentially just going to go ahead and delete this i'm just going to duplicate this one now this one of course we need to go back to the div go to our attributes and change this to two so our link lines up and plans is just a little bit different so if we go back over here and take a look we basically just have three sections with an extra text element in here for price and then just a simple link so this one's actually going to be way easier for us to do so what we'll do is expand this we don't need the second column in this we don't need the third div here which i don't think the columns element is going to be happy if we delete that div so i'm actually just going to delete the one inside of it so we have that extra white space there what i'm going to do in this particular example is just add another text element underneath this i'm just going to add in that same class so we inherit those other styles so ps menu list item text is what i had and then i'm going to add in another stacked class here so this one's going to be list item text let's just call this like 2 or something the margin we're going to just use margin top here so 0.5 em to keep things really consistent and then the size and the color is a little bit different so this is actually 16 pixels and then the color is 7 3 like that because it's just a little bit bigger than the actual text there for the price if we take a look you can see what i'm talking about here so 14.99 a user a month i'm gonna go ahead and get this stuff to match again and then i'll be right back with you guys okay so i just got everything up to date here in this second section so what we need to do now is get ourselves to a point where we can add something underneath this column which is of course going to be that link which takes you to the compare plans page so what i'm going to do is click on this mini wrapper here we're just going to add in a text link element let's just add a class here because on a real site you would probably do that so we're going to go like yes link green or something like that so text color we're going to set to the green our hover color is going to be the lighter green the typography is uppercase font weight is bolder so let's go like 700 and then we're just to write out compare plans something like that i think in their example there's like a real arrow icon but this is going to be perfectly fine and then this would probably just go to like i don't know your pricing page or something like that now the other thing is in order to get this to line up what we have to do is effectively just wrap this with a div we're going to set this div to a max width of 1200 pixels actually i think it was 120 and then we're going to set the width here to 100 and then that puts our link roughly at the edge of this container over here we have that extra spacing like i mentioned earlier coming in from that column but as you can see it technically is lined up on the left hand side so i don't know what it is roughly like let's say 25 pixels something like that that's about right good enough for me in this particular example so now let's go ahead and save and let's take a look on the front end so we have our features and we have our plans which is pretty cool so we need to add some extra spacing underneath that compare plans to give it some breathing room but this is looking super cool so on this div that we already have selected i'm just going to go 24 pixels of margin beneath that so now let's just save this refresh take a look one more time super super awesome really really cool and because all this stuff is just standard oxygen divs and icons and stuff you could customize it however you want now we do have a little bit more work to do back in our example here so we have a help a login and a download button those are going to be pretty easy to do but it might not be immediately apparent how you get this spacing between them so let's go ahead and set that up we go back over here to oxygen we have a lot of stuff going over on over here in our structure panel so let's just kind of revisit where we're at so far i'm actually just going to rename this real quick mega menus container i guess something like that make it a little a little bit more apparent what's going on so our header row if we expand this our link wrapper is just basically our image we have our link container here and then what we need is effectively one more div we may even need two but i'm gonna go ahead and just stick in another div in this header let's just use a text link here and then in the actual website there's no border on the bottom so we're gonna set up a new class here these actually aren't uppercase they're not that bold color they're just a little bit less emphasized so this will make sense for a new class let's call this ps header link d d e as in like d emphasized i don't know if that makes sense to anybody but it does for me so that text color was black the hover color is our green it wasn't uppercase so we're not going to change that the font weight i don't think was any different so we're pretty much good to go there the only thing really left to adjust is the hover color which is already there but we need a transition as well so we're going to go to effects transition 0.3 ease in out okay so there we go so the links were help and then let's add however much margin i think it's typically been 24. so we're going to clone that it was help login and then a download button so log in and then i'm going to duplicate this text link one more time and i'm actually going to add a stat class here so we can make a button that's not just a standard oxygen button so let's go d e button so we have that stacked class here we take a little look at this it should be relatively simple so we just need to change the typography and the border color so the typography color is going to be our lighter green it looks like so our typography color is going to be our green here i'm just going to add some margin to make it look roughly similar so let's go like 16 pixels of padding excuse me on the left and right sides maybe even a bit more let's go like 24 and then we'll go like six and six something like that and let's set our borders to that same green so we have the width of one solid and then let's change it to hover the hover green for the borders is going to be the lighter green we already have and then same thing for the hover state for our typography we're going to set that to the lighter green as well and then back in original i'm going to go to effects transition 0.3 ease in out which i think is already going to be inherited actually we probably don't need to add that to the button but just in case so now what we need to do is set this div here we're going to go to horizontal let's go to middle align and then the button wasn't log in it was download now the other thing is on this particular class for our button we don't need that margin on the right side so i'm going to set the margin on the right to zero and there we go so now we're much closer so we need to do one more thing we effectively have this right hand div over here so let's call this one just like extra links something like that but we need to go ahead and wrap this logo and our other menu container in one div and i'll show you why in just a second so we're going to go wrap with div stick those inside of it set this to horizontal and then go to middle align i believe and then we're going to set this width to 100 on the header row here and then now we need to go to space between so this is going to push our stuff to the far edges of our container here kind of like it is in the example so it looks like middle align is kind of working because we have this stuff over here middle of line but our elements right here are not working exactly as intended so what we're going to do is set this container here to just horizontal align and then top and then i don't actually know if this is a good idea but what i'm going to do here is just set this to margin top auto to push it down and then now everything is lined up as you can see so that is our header essentially done if we refresh here we're going to see a lot of big changes we do have some alignment issues ever so slightly here which we can take a look at but the point is that our mega menu does work and as you can see it is almost nearly closely identical to what we're looking at over here so this is pretty sweet looks like a couple small deviations is this borders a little bit thicker so that's probably three pixels instead of two like i did and then it looks like everything else is pretty much identical so we have that hover color on our links here the button gets a little bit lighter we probably need to bold that font a little bit to match so let's make some final tweaks here we're going to bold this button fix this alignment and then we'll call it done so back over here we're going to go to the typography we're going to set the font weight to 700. i think we need to make the borders a bit thicker so let's go back to our green here we're going to set that to two and then we need to go adjust the hover one as well so it's that lighter two like that that's good i'm going to call that one done and then what is the problem with our alignment here okay so the very last thing that i had to do to get everything lined up is just basically take this div here that contains these links and then my logo i had to set the height to 100 and then i just went in and set it to middle align and now everything looks good so if we save take a look on the front end you can see our mega menu is officially done i'm calling this done this is actually taken way way longer than i thought it would but this is a really awesome demonstration of the power of oxygen and thanks to that provided javascript code that they give you in that composite element this allows you to build a menu that i think is pretty much inconceivable to build and any other builder unless you were to use something like max mega menu but even then i'm not sure that you can achieve something that looks like this i mean we nearly cloned this which is pretty exciting obviously there are some deviations but overall it's pretty stinking similar if you ask me so hopefully this tutorial has been helpful for you guys if you're a premise like member what you can do is click on the link in the description below and you can get the short codes for this template that way you can go ahead and import it straight into your site you don't have to rebuild it but if you're feeling adventurous and you want to try to recreate this and get it working on your site feel free to follow this tutorial and you can get everything from start to finish so as always thank you so much for watching and i'll see you in a future video

Channel: Permaslug

Views: 16,057

Keywords: mega menu tutorial, oxygen builder mega menu, wordpress mega menu

Id: VLvAQaJZ7lY

Length: 29min 29sec (1769 seconds)

Published: Mon Feb 08 2021