Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

all right everyone so let's learn how to make a css only mega menu that doesn't require any javascript or any extra plugins and if you want more great content like this don't forget to subscribe so we'll learn how to make this and those are elementor inner sections so you can truly make them look exactly the way you want those are not templates as you will see those are directly in the same header template so the very first thing uh you will want to do is to create uh so you i you can see in the description i have uh my article so you can go there and follow along as there are quite a few steps and sometimes you will need to copy paste a few things so the first thing you will want to do is to go and to create a new editor template or if you already have one to go in there and to edit it and of course you will need elementor pro for this uh the tutorial will still work for elementor free users but you won't be able to create this in another template of course unless you have some kind of plugin that allows for this but to use a team builder and to create a header template using elementor pro function you will need elementor pro the link for elementor pro is is also in the description so here i already have my elementor pro header template 3d and i only added one element so far so but let's let's start first by creating so you will create your section and then the first thing after you add a section is to make sure you have only one column in your section so if if you created a two column section delete the other one this whole design requires that there is only one column in the section so then you will click to have the options of the section you will set it to the width to full you will set column gap to no gap and you will set a vertical link to middle and then let's refer to my article there are quite a few settings so i will be referring to my articles just to be certain i don't i remember everything so you will also need to set the z index to 99 and then padding to zero all right so now you will go in the column sections and we will set that up properly so you will want to set this to space between and the html tag you will want it to to be set to nav so so that it will tell the search engines that this is a navigation uh area and that everything in it is related to navigating the your website don't make the section sticky yet if you want your mega menu to be sticky because it will cause problem when you will edit it you will see about this a bit later and then we add everything we want in the section in the yeah in the section so in the single column so here i have the my logo every element that you add you will want the z index to be 11 and then the padding you can just adjust your liking but the index needs to be 11 and the positioning the width needs to be inline so now i will add a header so let's say services and then the same is true so the index 11 let's change the width to inline and then because it space between now of course it's going all the way to the other end because there are only two elements so now you can style this heading element exactly the way you want it in my case here i will just go in there and copy paste the styles so it will be a bit quicker and you will also want to change the html tag to div so that it's a little bit better for seo so then you will simply duplicate your heading for each main menu item that you will want on your page so we are not using the mine elementor nav menu item we are creating this by using heading element and then having a link in there so of course you will want your link in there and that's that's how this particular design works and then finally the button which i i will just like copy and paste so this is just a normal button element all right so and let me also add a a background color okay so now i will change the titles and i will be right back all right so now everything is added everything is fine so the main part is created now of course the padding is not quite right but the code will take care of a part of this so let's not worry about this for now after this what you will want is to create well your actual mega section that will show up below the when you will be hovering the parent element the uh mega section that will show up that's what we will create now so then we will use inner sections for this so let's just add an inner section after the button and then in the inner section you can add like whatever you want it doesn't really matter so here i will just create something quickly with the icon list is something that's that's good for this and and then of course the padding and everything will be will need to be adjusted so let's actually delete this let's place this where it goes and then let's uh make the intersection so for each of those inner sections that will be submenu items you will want also the this set to full and the class needs to be nav content so this is quite important otherwise the css won't work and then you can style it as you want so let's say i add a bit of padding you can add let me just duplicate this for example so you can have many columns and everything in here in the inner section it's fine so now i have one of them so let's just add another uh well let let's yeah let's duplicate it let's delete this column and let me add another element so let's just go with the portfolio element all right this seems good enough for demonstrations purposes okay so now we can start to see let's say we had three of them we can start to see why you should not make the column the uh the mind section sticky yet because you could not scroll down all the way to all of your sub menu sections so that's why you need to wait until everything is ready until if you want it sticky after everything is ready to come and turn this on all right so now all the inner sections are there they all have the right css class and everything is fine so how do we link them to each like parent menu item and that's where the css code is needed so uh so now item oh so the class the right class is menu content so i thought it was nav content it looks like it's menu content so let's quickly change this for the inner section that you want to be a children of the particular heading just bring it below this heading so this one let's say we want it below uh services so services and then this intersection uh and then the other two let's just say blog and about or uh i mean let's say premium and blog so after right after so this heading is premium this inner section will show up after and the other heading is blog and this scenario section will show up all right so now it looks like this it looks like quite a mess but that's perfectly fine and that's perfectly normal and then finally what you will want to do is add the css so you will come here you will copy the css and where i recommend to edit is in the header setting under advanced and custom css and then just paste it in there and now you can see right away that quite a few things have been taken care of the padding and the spacing on the on this has been fixed and and everything disappeared and now it shows up and over so right away everything is working except that of course we can see that i forgot to add a background color to my inner sections so it won't work without it so let's let's add it so let's add it too and i think i actually forgot to add a z index of nine so let's add the index line let's add the background color and if you want it white it's fine but just just make it white but it needs to have a background color and now let's have a look and it's just perfect so let's simply copy and then paste the style to the other inner sections all right and then finally i think we have it of course the styling is not perfect yet and requires quite a bit of work but everything works and everything works fine so now if i we can actually see it on the home page on my demo homepage so let me delete this one let me update because i have it assigned under conditions to show up on my demo homepage and here it is on my demo homepage so everything works and another very nice thing about this design is that it's like actually keyboard accessible which means it's good for accessibility if we go back to my original design where it's designed quite a bit better we can see that it's working very good and just pressing the enter key will navigate to the appropriate page that does the focus so this is very good for accessibility and uh yeah so that's it so just by using css and not even needing any javascript or any plugin we could create this great elementor mega menu now of course here the design is still only for a demo it could be it could look a lot better but i think it's good enough to give you an idea of what is possible so uh i hope you enjoyed this tutorial and let me know if it works for you and please subscribe for uh more similar content and thank you .

Video Discription

Companion video :

Let's learn how to make an Elementor Mega Menu using only CSS, and 0 extra plugins! It even works with Elementor Free.

Get the code and written instructions here :

Plugins add bulk to the web page, loads extra CSS and JS files, and requires you to create a template for every sub menu area. Not so with the method shown here!

Very lightweight way to create a mega menu, and super easy to maintain: edit everything right in the editor, as you normally would. No separate templates needed.

Consider supporting my work by buying your plugins through my links!

Get Elementor Pro

Get Discount Coupon Codes for Elementor Addons here :

Flywheel hosting

Siteground hosting

Cloudways hosting

Kinsta hosting

WP rocket

Shortpixel

Swift Performance Pro

 

Leave a Reply