From this tutorial, you will learn how to make a mega menu take up all the width of the page with JetMenu plugin.
It is always a good thing to know some small features to boost your site. By making your mega menu fullwidth, you show it off to its full extent. Follow the steps below to learn how to create a fullwidth mega menu of the JetMenu plugin for showcasing more content inside the items!
Making a fullwidth mega menu
Step 1 – Open the page, where there is a mega menu in the header and navigate to the More Tools > Developers Tools in the browser panel.
Step 2 – Click the Select an element in the page to inspect it icon in the appeared bar and inspect the section that takes up all the width of the page.
Step 3 – Now, all you need to do is to take a look at the CSS class of this section, copy this class and then go over to the WordPress Dashboard and open the JetMenu settings.
Step 4 – In the General tab, you need to find the Mega menu base width option. There are three options from which you have to choose.
Select the Width same as Custom CSS selector width option and insert a copied CSS class in the Mega menu width selector field. Since it is a CSS class, a dot is required before the name of this class (e.g., “.custom-section”).
Step 5 – Then save the settings.
Step 6 – Go back to the page where you’ve got a mega menu, and refresh it. Now you can see that the mega menu takes all the width of the page.
In conclusion, the fullwidth mega menu is ready.
Great! Now you know how to customize the mega menu width and how to make it fullwidth with JetMenu plugin.