all right everyone so welcome to the uh mega menu improvements tutorial so we will learn about how to add this dark overlay on the rest of the content when overriding a menu item that has a mega sub menu we will also learn how to make the menu items are bunched together so that they kind of stick together to the right and then how to make this all kind of responsive so if we look at mobile quickly now i haven't styled the mobile version but uh just to give you an idea how you would go about switching to this for mobile without having to create a whole new section that would only show on mobile and then we will also begin with what if you want a larger or a different size logo and then your sub menu item doesn't show up properly anymore or you cannot reach it without it closing so we will begin with this so for this you will go and let me just try and get it right all right let's use the navigator it will probably be quicker so let's go and get the inner section that's i have the css here but it's better to place it where i recommended earlier so let's change the color the background color of the inner section just so that we get a much better id all right so here it is now i will edit my css error but yours is probably somewhere else that's that's what's good with css it doesn't really matter where you add it it works regardless as long as it's on the same page for the most part there are there are a few exceptions to this but for the most part that's the case so the important part in the css for this is that value right here so let me show you you can over and then modify the css using your keyboard to get a live preview so if i were to uh like increase this let's say so well first let's see so here now if you look uh where my mouse cursor air is you will see a a border that defines the limit of the element so you will want the inner section to be well within that border ideally you would want the inner section to be almost under the title that you're overriding so so then it will work without fail so if the top value was uh greater rather then there would be a space in between the overable element and the submenu item so that when you would get there it would essentially over off and then it would not work so that's why you will want to adjust this value to be like this or like this will also work then you will just have to adjust the like the padding on your sub menu section to get the look you want but you want it to be right right under the editing text or maybe even a bit behind and within this little box that we see so then when you go in then you get to over the the sub menu item so then it stays there so this is important to know if you were to use uh if you had different sizes like if your logo was a different size or or your other uh text or something like this you might require a modifications in this top value so that's that's how you would make sure that everything works and then when you're set it looks like i won't be able to get it again you just switch back the color to what it was so i will just use the history for this it will be quicker here all right then so for the other modification it's the the overlay the dark overlay behind the content so let me close this for a bit so to add this you can go to my article and then i have a section towards the end called modifications and improvements so you can simply grab the code from there and and just add it it's not uh similar to what you already have so you can simply add it to your page or your header template and then so for me i have the code so i already added it so if i remove it now we can see it's not there if i add it this is what happens for this to work well you will want to remove the padding on your inner section that is a submenu item so you will want to remove at least the top and the bottom padding the left and right can remain but the top and the bottom here you will want to remove it and then you will want to set the value here instead for the top and bottom padding so let's say i wanted to increase the padding a bit i could change this so i think i think 3 is fine but this is where you would add it to this is to avoid a a bug that makes it uh look uh less good so by using it in the css air instead it looks quite a bit better and then uh for the color of the overlay you can simply edit the value here so for example if you want to make it lighter you can change this to like 14 if you want to make it darker so this is a transparency value so you can change it to 74. and then if you just want to change the color itself uh you can adjust the rgba value here so yeah and then the rest should be uh no modifications should be required for the rest all right so then how to make them a link to the right now we cannot really see the difference because my my screen is small and and they just fit but here we can already see it so they they all stick all the menu items stick together to the right so how to achieve this so this is a sign let me zoom back in to see the code better so you can go to my article and the code is right there along with instructions so it's just a little bit of code and then you can paste it so i have it right there so the first thing is the padding of each items related to each other so i will zoom out a bit to demonstrate this better so if i change the value so if i lower the value to 13 then there is just 13 pixels of padding left and right 23 33 so yeah and then the only other thing you need to know about this is uh have item end of type 2 so this works if this header the first header of the nav items is the the one that's in position two in the column so in the column we have uh all all these elements that are sibling elements from the code point of view so they are all siblings and here the first heading that's an nav item is in position two so that's what you you need to have entered here so if for example you had a logo and then a different one for your mobile version website then you would want this would become in position tree so you would change it to the two ear to three and then it would work now it still works and you you will see what happens so it it's just uh grouping them together from element 3 in the column so for now of course it doesn't really work we need 2 in there but if you add two logos even if one is hidden like for a mobile and we see it on on desktop only and vice versa uh you need to adjust this value here so that's that's pretty much it for for these changes uh so then the only other thing i want to go over is the mobile version so it's not really compatible to be changed directly to a mobile version so what i've done is to simply all all the adding elements and the button i went under advanced and in responsive i i'd on tablet and mobile and then i added a normal nav menu element from elementor and i added on desktop only and i have it on tablet and mobile so yeah nothing nothing super fancy there and uh one important thing is that the positioning of of this nav menu element also needs to be inline like the logo and and all the parent menu items so this also needs to be set to inline and then one other thing to note if you have a similar design than me is the like my logo i had to make it smaller so that it fit on the mobile version so here we can see this is a responsive setting thankfully so i set the width to custom so then i could make it smaller and then it fit now this is what it will look like in the editor and when you will move your mouse it will be a bit buggy but if you close and you get a more accurate preview and as i said i didn't style this but you get the id and and you know how to design a uh header by now so just add a bit of padding and stuff and uh it it works uh just fine so i think that's all and i hope you've enjoyed and please subscribe for more content like this thanks you .
Let's learn how to add a dark overlay to the page while the menu is being viewed.
Also learn how to make the menu items stick together, to the right of the page.
And finally, mobile version.
Get the code and written instructions here :
Consider supporting my work by buying your plugins through my links!
Get Elementor Pro
Get Discount Coupon Codes for Elementor Addons here :
Swift Performance Pro