One of the major updates in GroovePages for December 2021 is Mega Menus.
Yes, you can already create menus and sub-menus in GroovePages but Megamenus allow you to further customize and design the look of your menus – and they look pretty cool!
I will be releasing a series of short GroovePages tutorials to go in tandem with my GroovePages for Beginners tutorial.
So if you haven’t seen that video yet, watch that video first to get the core understanding of how to use GroovePages.
Ok let’s dive right into it.
Creating MegaMenus on GroovePages Video Tutorial
- 00:00 Intro
- 00:38 Menu Pages
- 01:36 Creating MegaMenus
- 01:55 Saving MegaMenus
- 02:13 Types of MegaMenus
- 02:51 Changing icons
- 03:12 Changing icon color
- 03:20 Changing Headings
- 03:42 Link the “list container”
- 04:05 Changing hover effect
- 04:30 Deleting icons & headings
- 04:45 Changing body background color
- 05:16 Deleting MegaMenu
Login to your Groovepages website.
- Head to “Pages”, and these are all the pages in your menu.
- You can create a megamenu for every page on your site.
Now let’s pretend this a website for a financial coach.
Under the page “Work with Me”, she has service 1 and 2 online programs as sub-pages.
Instead of leaving it as a sub-pages, drag the services and 2 online sub-pages to the “Hidden Pages” section:
Next, we’re going to create a mega menu for the “Work with Me” page:
- Click on three dots of the page you want to create a mega menu for and “Edit Mega Menu”
A few things to note:
- The megamenu is hidden inside the builder and
- There will be options here only available to the mega menu
- There’s the mega menu canvas over on the right
- Once you finish styling it, you will click on the “save & exit” button to save your work.
Next you want to head to:
- Blocks > block type > in the drop down > select “Mega Menu”
- Click on it, you will see mega menus design that contain icons, images, opt-in forms within them, or mega menu wireframes.
I really like the 2 column icon mega menu, so let’s drag it into the canvas.
However, if you have a page with a lot of sub-categories, you can drag in this 3 or 4 column megamenu block.
Changing MegaMenu Icon, Text & Links
- You can change the icon by clicking on it, click on the “configure” tab, change the icon.
- To change the icon color, head back to the “design” tab, click on “text” and change the color.
- To link the icon to a web page, click on the “configure” tab, and under “link to”, select a page or URL you want to link to.
Linking An Entire Container In GroovePages
Now instead of linking icons and headings individually, I would highlight the whole container and link it.
You do that by clicking on the “List container”, click on the “configure tab” and linking the entire container to a specific page.
Changing Hover Effect In GroovePages Mega Menu
You see how when I hover over the containers, the background color is light blue?
You can change that to your brand colors by heading to “States” in the formatting toolbar.
Then click on “background” and change that light blue color to another color.
You can further customize the mega menu by deactivating it on:
- all screens
- desktop only
- laptop only
- mobile only,
- horizontal or vertical tabs.
Remember, once you’re finished styling your megamenu, you must click “SAVE & EXIT” to save your mega menu.