Mega Menu Documentation

Mega Menu Documentation - .gc-is-mega-sub-menu

Mega-menu is a menu that expands across the page (not so much down the page). The mega-menu is a possible solution of a long menu dropdown or navigating sub-sub-menus.

Unfortunately, menu CSS varies greatly from theme to theme, so I have coded 2 pure CSS solutions to create mega-menu dropdowns for the 2020 and 2022 themes. Also, I give no guarantee that when all is done this will work. For example, I don't think the 2022 mega-menu CSS will work if the menu is aligned right.

Two things need to happen to be able to use this feature:

1. add the necessary CSS script to the child theme (2 solution),
2. configure the menu and add the CSS class to the main menu item.

Add the necessary CSS script to the child theme

Solution #1

Go to the assets/css folder in the child theme and copy and paste the appropriate mega-menu-(year).css CSS into the bottom of the main child theme style.css.

Solution #2

In the child theme's functions.php file, find the following code at the top of the file:

/*
** Enqueues the external CSS file
** Choose either mega-menu-2020.css or mega-menu-2022.css
** based upon your theme.
*/
/*
add_action( 'wp_enqueue_scripts', 'theme_enqueue_external_styles' );
function theme_enqueue_external_styles() {
	wp_register_style( 'mega-menu-css', get_stylesheet_directory_uri() .
		'/assets/css/mega-menu-2020.css' );
	wp_enqueue_style( 'mega-menu-css' );
}
*/

and uncomment the code as follows:

/*
** Enqueues the external CSS file
** Choose either mega-menu-2020.css or mega-menu-2022.css
** based upon your theme.
*/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_external_styles' );
function theme_enqueue_external_styles() {
	wp_register_style( 'mega-menu-css', get_stylesheet_directory_uri() .
		'/assets/css/mega-menu-2022.css' );
	wp_enqueue_style( 'mega-menu-css' );
}

ADDITIONALLY! you must select which mega-menu year CSS file to use

'/assets/css/mega-menu-2020.css' );

or

'/assets/css/mega-menu-2022.css' );

Note the difference in the year.

Configure the menu and add the CSS class

2020

For Twenty Twenty theme from the dashboard select Appearance -> Menu. On the main line of menu select the down caret, to see something like the following:

 Navigation Label
  Some Main Menu Item
 CSS Classes (optional)
  _______________________

In the CSS Classes field enter the class gc-is-mega-sub-menu as follows:

 Navigation Label
  Some Main Menu Item
 CSS Classes (optional)
  gc-is-mega-sub-menu

2022

For Twenty Twenty-Two theme, the menu is a Template Part (totally different from 2020). From the admin toolbar on the home page click the Edit site => W in upper left corner => Template Parts => Header or the appropriate header part.

On the main line of menu select the item to have a mega-menu. On the Settings panel on the Block tab, towards the bottom click on the Advance expansion panel. In the Additional CSS class(es) field enter gc-is-mega-sub-menu