This tutorial provides the steps which enable you to add a mega menu to any Genesis hook position in any Genesis child theme. You can also swap out the genesis hooks and use this solution in any non Genesis child theme.
Note : Assumes you have already created a mega menu.
# Step 1 : In your WordPress Dashboard, go to Mega Menu > Menu Locations and click the blue button to Add another menu location. In this example, we have added the created a new menu location named Mega Menu After Header in the Location description field seen in the following screenshot :
# Step 2 : In your WordPress Dashboard, go to Appearance > Menus, click create a new menu, name the menu ( in this example we have named the menu Mega Menu.
Under Menu Settings next to Display Location, check the box for your new menu ( in this example our menu is named Mega Menu After Header.
Also make sure you check the Enable checkbox as seen in the following screenshot.
# Step 3 : In your WordPress Dashboard, go to Mega Menu > Menu Locations > Menu Display Options and copy the value for the theme_location argument. In this example, the value equals max_mega_menu_1 as seen in the following screenshot.
# Step 4 : Using FTP or File Manager in Cpanel, navigate to your child theme folder and edit your functions.php file so you can then add the following PHP code to the end of your functions.php file like you see in the following screenshot :
Here’s the code which includes the max_mega_menu_1 value and includes the function call from step 3 :
This function uses the genesis_after_header hook however you can swap out this hook for any other Genesis hook to change the location your mega menu outputs in your theme.
Mobile Menu Toggle Duplicate
You can use CSS like this in your child themes style.css file to hide the duplicate menu toggle button generated by mega menu if needed.
.menu-toggle {
display: none!important;
}
Leave a Reply
You must be logged in to post a comment.