Amethyst Web site Design –

Typically the standard WordPress dropdown navigation menu doesn’t fairly work as a result of the variety of gadgets is just too lengthy. You should utilize any of the favored mega menu plugins, however it’s fairly easy to type a multi column mega menu for Genesis themes utilizing solely CSS.

mega menu drop down aligned to item

 

Tutorial Overview

This tutorial has been up to date as a way to select the order of the menu gadgets to be both horizontal, or now, vertical too. Adjustments are additionally included for the mobile-first Genesis themes.

This tutorial was initially for Genesis themes that embrace the accessible navigation menu, and the CSS was for desktop-first themes. I’m utilizing the Genesis Pattern theme, however you’ll be capable of use this tutorial on different themes too.

You’re going to make use of a CSS class to outline which menu gadgets will act as mega menu dropdowns. This lets you have some regular menu gadgets and a few mega menu gadgets; it permits for flexibility. You’re going to restrict the depth of the menu first by including a perform to your features.php, and then you definately’ll add the CSS for the mega menu on massive screens and smaller screens, in case your theme is NOT mobile-first. You’ll be able to resolve on the variety of columns you want to your menu gadgets. After all, you possibly can at all times add extra shade kinds, as properly.

Step 0. Methods to Inform Which CSS to Use for Your Genesis Theme.

Does your theme embrace accessible menus?

If you happen to look in your theme’s features.php, and seek for “accessibility”, you’ll see a bit that appears like:

// Add Accessibility assist.
add_theme_support( 'genesis-accessibility', array( '404-page', 'drop-down-menu', 'headings', 'rems', 'search-form', 'skip-links' ) );

Word the inclusion of “drop-down-menu”.

OR you will notice this line:

// Provides assist for accessibility.
add_theme_support( 'genesis-accessibility', genesis_get_config( 'accessibility' ) );

Is your theme mobile-first or desktop-first?
Look in your type.css on the Media Queries part.

Your theme is mobile-first (Genesis 2.6 and better), in case you see a min-width:
You’ll be able to skip Step 4. of the tutorial.

@media solely display and (min-width: 960px) {

Your theme is desktop-first (Genesis lower than 2.6), in case you see a max-width:
You will have all steps of the tutorial.

@media solely display and (max-width: 1340px) {

Get All of the Code

All the code is on GitHub in this Gist .

If you happen to look in your theme’s features.php, and seek for “accessibility”, you’ll see a bit that appears like:

Step 1. Restrict the Navigation Menu Depth to 2 Ranges

The very first thing you need to do is restrict the sub-menus to just one stage. So that you’ll have a complete of two menu ranges – the highest stage that’s seen and one sub-menu. We’re including a depth of two for the first menu. Within the pattern theme, the secondary menu is already restricted to a depth of 1.

You’ll be able to skip this step in case you’re the one one utilizing your web site, and also you bear in mind to restrict your mega menu gadgets to only two ranges.

Add the next to your features.php. On the finish is okay. Make sure to make a backup first, and use a textual content editor.

<?php // Don't add this line

// Cut back the first navigation menu to 2 ranges depth.
add_filter( 'wp_nav_menu_args', 'genesis_sample_primary_menu_args' );
perform genesis_sample_primary_menu_args( $args ) {

	if ( 'main' != $args['theme_location'] ) {
		return $args;
	}

	$args['depth'] = 2;

	return $args;
}

Step 2. Add Megamenu Class for the Menu Gadgets

You’re going so as to add a category to the menu gadgets that you just need to behave as mega menu gadgets.

mega menu css classes for menu item
  1. Out of your WordPress dashboard, go to Look > Menus.
  2. Click on on one of many high stage menu gadgets that you just need to use as a mega menu.
  3. Within the CSS Courses area*, add megamenu.
  4. Save the menu.

*If you happen to don’t see the CSS Courses in your menu gadgets, click on on Display Choices within the higher proper hand nook of the Menu display. Add a examine to CSS Courses.

Step 3. Add CSS for Bigger Screens

You’re going so as to add some kinds to your type.css file now. Use a textual content editor and you’ll want to save a backup first.
In type.css, discover the next selector:

.genesis-nav-menu .sub-menu .sub-menu 
	margin: -56px Zero 0 199px;

Word that the numbers could also be totally different, relying in your theme.

Just under the selector above, add:

/* Added for Mega Menu */
	.genesis-nav-menu .megamenu .sub-menu 
		background-color: #fff; /* identical shade as .genesis-nav-menu .sub-menu a */
		border: 1px strong #eee; /* elective */
		peak: auto;
		width: 610px; /* make width wanted plus 10px */
		column-count: 3; /* elective to alter the order of the gadgets to be vertical */
		column-gap: 0; /* elective to alter the order of the gadgets to be vertical */
	
	
	.genesis-nav-menu .megamenu.transfer .sub-menu  /* elective to proper align the sub-menu */
	
	.genesis-nav-menu .megamenu .sub-menu a 
		border: 0; /* elective */
		width: 200px; /* 1/Three width for Three columns */
		/* width: 300px; /* half width for two columns */

Rationalization of CSS

You’ll be able to modify all these to make the sub-menus seem as you want.

  • background-color: To the sub-menu selector, you need to use the identical background-color because the selector – .genesis-nav-menu .sub-menu a. This may give it a uniform background, particularly in case your menu gadgets don’t make even columns.
  • border: A border across the whole sub-menu is elective.
  • peak: A peak is required for the drop down.
  • width: The width will be no matter you want to your menu. You want a couple of additional pixels as a result of there’s house between the menu gadgets.
  • column-count: That is wanted solely if you wish to have them menu merchandise order be vertical; with out this the menu merchandise order will likely be horizontal.
  • column-gap: That is wanted solely if you wish to have the menu merchandise order be vertical.
  • .genesis-nav-menu .megamenu.transfer .sub-menu The “transfer” class is elective and mentioned beneath.
  • border: 0; You’ll be able to take away the border on sub-menu gadgets.
  • width: The width of every merchandise is 1/3 (Three columns) or half (2 columns) the whole width of the sub-menu, 600px + 10px for the tutorial.

Rationalization of the Transfer Class

By default, the mega menu drops down immediately beneath the highest stage menu merchandise, as within the picture beneath. That is nice for menu gadgets on the left, however for big menus, the drop downs for menu gadgets on the best could also be minimize off. You’ll be able to see the right-aligned place within the picture on the high of the tutorial. You’ll be able to add an extra class, so you possibly can select to shift solely among the sub-menus, possibly the final one or two gadgets. You’ll simply add – megamenu transfer – to the CSS Class area these menu gadgets, as a substitute of simply – megamenu – below Look > Menus.

mega menu drop down right aligned

Step 4. Add CSS for Cell Menus – Solely Desktop-First

This solely must be added for themes which can be desktop-first.

Once more you’re going so as to add some kinds to your type.css file.
In type.css, search for the part the place the cell menu is added. In Genesis Pattern, it’s @media solely display and (max-width: 1023px). Discover the next selector .js .genesis-nav-menu .sub-menu .sub-menu

	.js .genesis-nav-menu .sub-menu .sub-menu {
		margin: 0;
	}

Under it add:
.genesis-nav-menu .megamenu .sub-menu 
			column-count: 0; /* elective if added above */
                        overflow: hidden;
			width: 100%;
	

	.genesis-nav-menu .megamenu .sub-menu a {
		width: auto;
	}

Let me know the way this tutorial works so that you can add a mega menu to your Genesis Theme or contact me for a small venture so as to add the mega menu for you.

 

Leave a Reply