Back to contents

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 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.

Developers Tools in your 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.

Select an element in the page to inspect it

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.

General tab

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.

JetMenu plugin

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.