How to make a fullwidth mega menu with JetMenu plugin for Elementor

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 off your mega menu to its full extent. Follow the steps below to learn how to create a fullwidth mega menu for showcasing more content inside the menu items!

Making a fullwidth mega menu

Step 1 – Proceed to More Tools > Developers Tools in your browser panel.

Step 2 – Click Select an element in the page to inspect it icon in the bar that’s recently appeared 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 WordPress Dashboard and open JetMenu settings.

Step 4 – In General tab you need to find Mega menu base width point option. There are three options from which you have to choose.

Select Width same as Custom CSS selector width option. You will consequently see a new field, the Mega Menu width selector, below, where you need to insert a copied CSS class. 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.