GroovePages MEGAMENU – How To Create Sub-Menus & MegaMenu In GroovePages UPDATE

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

Timestamps:

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.
Groovepages megamenu pages

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:

Groovepages 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.
Groovepages megamenu builder and canvas

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.
Groovepages blocks megamenu

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.
Groovepages megamenu icons, text and links

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.

linking container to 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.

MegaMenu Customization

You can further customize the mega menu by deactivating it on:

  • all screens
  • desktop only
  • laptop only
  • mobile only,
  • horizontal or vertical tabs.
MegaMenu options

Remember, once you’re finished styling your megamenu, you must click “SAVE & EXIT” to save your mega menu.

Aimee Vo

About the author

Hey, I'm Aimee -An online business and marketing strategist with over 12 years experience in running digital marketing campaigns. Sun, sand and beach is my zen. However I dig content marketing, lead generation and marketing automation too! You'll find me posting digital marketing training on Youtube to help entrepreneurs start and grow their business online.

Leave a Comment