Fast & Easy WordPress Mega Menu without Plugins

<div id="">
<p><img src="https://i.imgur.com/FSKqoph.png" /></p>
<p>Last updated: January 21, 2019</p>
</div>
<div id="">
<h2>Mega menu structure we are aiming for:</h2>
<div class="wp-block-image">
<figure class="aligncenter"><img class="wp-image-6083" src="https://www.prowebdesign.ro/pwd/wp-content/uploads/2019/01/wp-mega-menu-demo-1.png" sizes="(max-width: 800px) 100vw, 800px" srcset="https://www.prowebdesign.ro/pwd/wp-content/uploads/2019/01/wp-mega-menu-demo-1.png 800w, https://www.prowebdesign.ro/pwd/wp-content/uploads/2019/01/wp-mega-menu-demo-1-300x210.png 300w, https://www.prowebdesign.ro/pwd/wp-content/uploads/2019/01/wp-mega-menu-demo-1-768x538.png 768w" alt="" /></figure>
</div>
<p class="alert alert-info">This mega menu requires no plugins and no edits to the WP menu Walker. Just some admin work and CSS.</p>
<p><strong>Scope:</strong></p>
<ul>
<li>You coded a WordPress theme, the navigation menu is already in place and is responsive.</li>
<li>Several menu items have drop down menus with one level of sub-pages.</li>
<li>Now you want to add a mega menu to SOME of the menu items, that have more than one level of sub-pages.</li>
<li>Sub-pages will be displayed in columns. First level sub-page will be a column title, and its children will be the links in a column.</li>
<li>You also want a possibility to add images under each column title.</li>
<li>All columns should have equal width.</li>
<li>Columns&rsquo; content can be shorter or taller, but the columns will still have the same height. They won&rsquo;t break the layout.</li>
<li>Columns should automatically wrap on a second row if a certain number of columns per row is reached.</li>
</ul>
<p>Sounds impossible? It&rsquo;s actually quite easy.</p>
<h2>Step 1. Set up page structure in WordPress admin.</h2>
<ul>
<li>Go to Admin -&gt; Appearance -&gt; Menus.</li>
<li>Select the menu you want to add a mega menu to.</li>
<li>Insert all the first and second level sub-pages.</li>
<li>Then drag them under the top-level menu item that will have the mega menu, and indent:
<ul>
<li>indent first level sub-pages once and second level sub-pages twice.</li>
</ul>
</li>
<li>Save the menu.</li>
</ul>
<p>You should have something like the image below. Add as many sub-items as you need. We have used custom links, but you would normally use actual pages or posts, or combination of pages, posts, categories, etc.</p>
<div class="wp-block-image">
<figure class="aligncenter"><img class="wp-image-6076" src="https://www.prowebdesign.ro/pwd/wp-content/uploads/2019/01/wp-megamenu-structure.png" sizes="(max-width: 514px) 100vw, 514px" srcset="https://www.prowebdesign.ro/pwd/wp-content/uploads/2019/01/wp-megamenu-structure.png 514w, https://www.prowebdesign.ro/pwd/wp-content/uploads/2019/01/wp-megamenu-structure-233x300.png 233w" alt="" /></figure>
</div>
<h2>Step 2. Add CSS classes to the menu items in admin.</h2>
<p>On the menu structure you created, uncollapse the top level menu item and insert class <strong>has-mega-menu</strong> into the <em>CSS Classes (optional)</em> field.</p>
<p>If you don&rsquo;t see the <em>CSS Classes (optional)</em> field, click Screen Options tab at the top right of the screen and check <em>CSS Classes</em> checkbox.</p>
<p>Now, insert class <strong>mega-menu-column</strong> into each of the first level sub-pages <em>CSS Classes (optional)</em> field.</p>
<div class="wp-block-image">
<figure class="aligncenter"><img class="wp-image-6077" src="https://www.prowebdesign.ro/pwd/wp-content/uploads/2019/01/wp-megamenu-css.png" sizes="(max-width: 549px) 100vw, 549px" srcset="https://www.prowebdesign.ro/pwd/wp-content/uploads/2019/01/wp-megamenu-css.png 549w, https://www.prowebdesign.ro/pwd/wp-content/uploads/2019/01/wp-megamenu-css-224x300.png 224w" alt="" /></figure>
</div>
<h2>Step 3. Adding CSS code to the theme.</h2>
<p>Here we will discuss only the CSS that will give the mega menu its structure. Styling actual links is your responsibility, since every theme is different.</p>
<p>Add the CSS to the main theme CSS file.</p>
<h3>CSS for the top level menu item</h3>
<pre class="brush: css; title: ; notranslate" title=""> @media screen and (min-width: 600px){ .has-mega-menu{ position:static; } li.has-mega-menu .sub-menu { width: 100%; position: absolute; top: NNpx; /insert the needed value/ z-index: 100; left:0px; right:0px; } li.has-mega-menu:hover&gt;.sub-menu{ /flexbox fallback for browsers that do not support CSS GRID lyout/ display: flex; flex-wrap: wrap; /CSS GRID lyout/ display: grid; grid-template-columns: repeat(auto-fit,minmax(50%, 1fr)); } } @media screen and (min-width: 992px){ li.has-mega-menu:hover&gt;.sub-menu{grid-template-columns: repeat(auto-fit,minmax(33.3333%, 1fr)); } } @media screen and (min-width: 1200px){ li.has-mega-menu:hover&gt;.sub-menu{grid-template-columns: repeat(auto-fit,minmax(25%, 1fr)); } } </pre>
<p>As you see we are starting to display the mega menu for screens that are at least 600px wide. There&rsquo;s no use to display it for smaller screens. Use your default mobile styling for screens &lt;600px. We are also displaying mega menu on mouse over. If your theme displays sub-menus onClick, adjust the code accordingly.</p>
<p><strong>It&rsquo;s important</strong> to give <code>position:static</code>; to the top level menu item. This way, the absolutely positioned <strong>.sub-menu</strong> will span 100% of the width of the first ancestor container that has <code>position:relative;</code> . So make sure you give <code>position:relative</code> to the site header or any other container that suits you. If top level menu would have had <code>position:relative</code>; then the mega menu would be only as wide as the top level menu item.</p>
<p>This line <code>grid-template-columns: repeat(auto-fit,minmax(50%, 1fr));</code> tells <strong>.sub-menu</strong> (default WP sub-navigation class) that all its immediate children will be displayed as 2 columns of equal width on screens over 600px wide, as 3 columns of equal width on screens over 992px wide, etc. You can edit the break points to suit your needs.</p>
<p>We are also using Flexbox layout as a fallback for browsers that do not support CSS GRID lyout.</p>
<h3 id="mce_24">CSS for the first level sub-pages</h3>
<pre class="brush: css; title: ; notranslate" title=""> @media screen and (min-width: 600px){ li.mega-menu-column { width: 100%; max-width: 100%; min-height: 1px; padding: 10px 25px; flex: 1 0 calc(50%); } } @media screen and (min-width: 992px){ li.mega-menu-column {flex: 1 0 calc(33.333%);} } @media screen and (min-width: 1200px){ li.mega-menu-column {flex: 1 0 calc(25%);} } </pre>
<p>As you see, here we are just the CSS for the Flexbox fallback. Browsers that do support CSS GRID will simply ignore this code.</p>
<p>And that is all! You will, of course, style the first and second level links as you wish.</p>
<h2>Adding images.</h2>
<p>Adding images is also quite simple. Go back to Admin -&gt; Appearance -&gt; Menus. And add HTML code for an image to each of your First Level sub-pages. The image should be either uploaded to WP media library or FTP-ed to the server. In any case, something like this:</p>
<pre class="brush: xml; title: ; notranslate" title="">&amp;amp;lt;img src="http://yoursite.com/wp-content/themes/yourtheme/images/image.jpg"&amp;amp;gt;</pre>
<div class="wp-block-image">
<figure class="aligncenter"><img class="wp-image-6079" src="https://www.prowebdesign.ro/pwd/wp-content/uploads/2019/01/wp-megamenu-img.png" sizes="(max-width: 592px) 100vw, 592px" srcset="https://www.prowebdesign.ro/pwd/wp-content/uploads/2019/01/wp-megamenu-img.png 592w, https://www.prowebdesign.ro/pwd/wp-content/uploads/2019/01/wp-megamenu-img-300x188.png 300w" alt="" /></figure>
</div>
<p>You may want to add this CSS to the theme CSS file to make sure images sit on their own row, instead of floating next to the link:</p>
<pre class="brush: css; title: ; notranslate" title=""> .mega-menu-column img { display: block; } </pre>
</div>