Knowledgebase

Overview

The Mega Menu feature allows you to display rich, multi-column content in your navigation dropdown menus instead of simple text links. When visitors hover over or click a menu item, they see a full section of content with images, links, descriptions, and formatted layouts. This powerful feature is available exclusively with Advanced Templates and is ideal for sites with complex navigation structures or prominent sections that deserve enhanced visibility.

Prerequisites

Required:

• Your site must use an Advanced Template
• You must have created at least one section with content to display in the mega menu
• Administrator access to the Site Manager

Recommended knowledge:

• How to create and edit pages
• How to create and manage sections
• Basic understanding of your site's navigation structure

What is a Mega Menu?

Traditional dropdown menus show simple lists of links. A Mega Menu transforms these dropdowns into rich content areas that can include:

• Multiple columns of organized links
• Images and icons
• Descriptive text
• Featured content
• Complex layouts with headings and groupings
• Any content you can create in a section

Common uses:

• Large parishes with many ministries and programs
• Diocesan websites with multiple departments and resources
• Educational institutions with various programs and services
• Sites with complex hierarchies that benefit from visual organization
• Featured content that deserves prominent placement

How Mega Menus Work

When you enable the Mega Menu feature for a page:

1. The page appears in your main navigation as normal
2. When visitors interact with that menu item, instead of showing a standard dropdown list
3. The entire section you've selected displays in a large, formatted dropdown area
4. Visitors can interact with all the content within that section
5. The mega menu inherits styling from your template or can use custom section properties

Enabling Mega Menu on a Page

Step 1: Prepare Your Section Content

Before enabling a mega menu, you need to create the section that will appear in it:

1. Navigate to the page where you want to create your mega menu content (this can be any page, including the page with the mega menu itself)
2. Click "Edit" to open the page editor
3. Create a new section or identify an existing section with the content you want to display
4. Design your section with mega menu display in mind:
   • Use clear headings to organize content
   • Include images if appropriate
   • Create multiple columns if needed
   • Keep content scannable and well-organized
5. Note the section ID or be prepared to find it when configuring

Tip: Create a dedicated page just for mega menu sections that you keep hidden from navigation. This keeps your mega menu content organized and separate from your regular pages.

Step 2: Enable Mega Menu on Your Page

1. Go to Media → Pages
2. Find the page where you want the mega menu to appear in navigation
3. Click the options menu (three dots) and select "Page Properties"
4. Scroll to the Menus section
5. Find the Mega Menu toggle and turn it ON

Step 3: Select Your Section

Once the Mega Menu toggle is enabled, additional options appear:

1. Section to be displayed in the mega menu dropdown
   • A dropdown menu appears listing all available sections across your site
   • Sections are organized by type and page
   • Select the section containing your mega menu content
   • Format: SECTION_TYPE: Section Title (ID) on Page Title (page-name)
2. Preview
   • An iframe preview appears showing exactly how your section will look
   • Review the layout, content, and formatting
   • Make adjustments to your section if needed

Step 4: Configure Display Options

Use Advanced Properties toggle:

• ON: The mega menu uses the advanced styling properties configured for your section (background colors, spacing, custom CSS, etc.)
• OFF: The mega menu uses default mega menu styling from your template
• Choose based on whether your section needs special styling or should match the standard menu appearance

Use Menu Font Colors toggle:

• ON: Text in the mega menu uses the font colors defined in your template's menu configuration
• OFF: Text uses the colors defined in your section or template defaults
• Turn this on for consistent color schemes across your navigation

Step 5: Save and Test

1. Click "Save Changes" at the bottom of the page properties form
2. Visit your website and navigate to the main menu
3. Hover over or click the page with the mega menu enabled
4. Verify the section displays correctly
5. Test all links and interactions within the mega menu
6. Check display on desktop, tablet, and mobile devices

Designing Effective Mega Menu Content

Layout Best Practices

Use Clear Structure

• Organize content into logical groups with headings
• Create visual hierarchy with different heading levels
• Use white space to separate sections
• Keep the most important items at the top left

Column Organization

• 2-4 columns work best for most mega menus
• Group related items within each column
• Balance content across columns for visual appeal
• Consider using a featured column for highlighted content

Visual Elements

• Include relevant images or icons when appropriate
• Don't overload with too many images
• Ensure images are optimized for fast loading
• Use consistent image sizing within the menu

Content Guidelines

Keep it Scannable

• Use short, descriptive link text
• Write brief descriptions (1-2 sentences maximum)
• Use bullet points or lists for easy scanning
• Avoid long paragraphs

Prioritize Information

• Put the most important or popular items first
• Feature new or time-sensitive content prominently
• Group by user needs rather than organizational structure
• Include calls-to-action where appropriate

Maintain Consistency

• Use similar formatting across all mega menus
• Keep terminology consistent
• Apply consistent visual styling
• Match the tone of your main site

Section Types for Mega Menus

Different section types work well for different mega menu purposes:

Multi-Column Sections

• Best for organizing many links by category
• Creates clear visual separation
• Good for comprehensive navigation

Featured Content Sections

• Highlights important pages or resources
• Combines images with text
• Draws attention to key items

Mixed Content Sections

• Combines links, images, and descriptions
• Provides rich information at a glance
• Good for complex topics needing context

News or Events Sections

• Shows recent updates or upcoming events
• Keeps content dynamic and fresh
• Encourages repeat visits

Managing Multiple Mega Menus

If your site has several mega menus, consider these organizational strategies:

Naming Conventions

Create a consistent naming system for mega menu sections:

• Include "Mega Menu" in the section title
• Reference the parent page name
• Example: "Mega Menu - Ministries Overview"

Centralized Management

Keep all mega menu sections on a single hidden page:

1. Create a page called "Mega Menu Content" (or similar)
2. Hide this page from all navigation
3. Add all your mega menu sections to this page
4. Easy to find and update all mega menus in one place

Content Updates

Establish a regular review schedule:

• Check for outdated information monthly
• Update featured content seasonally
• Remove links to archived pages
• Test all links quarterly

Advanced Configuration

Using Section Advanced Properties

When "Use Advanced Properties" is enabled, your mega menu respects all section styling:

Background Settings

• Custom background colors
• Background images
• Gradient effects
• Opacity settings

Spacing and Padding

• Custom margins and padding
• Section-specific spacing rules
• Responsive spacing adjustments

Custom CSS

• Apply custom styling to mega menu sections
• Override template defaults
• Create unique visual effects
• Maintain brand consistency

Template Menu Font Colors

Your template configuration includes menu font color settings. When "Use Menu Font Colors" is enabled:

• Link colors match your main navigation
• Hover states are consistent
• Visual cohesion across all navigation elements
• Simplified color management

When to use:

• You want navigation consistency
• Your section colors conflict with menu design
• You prefer centralized color control

When not to use:

• Your section has custom color schemes
• You want the mega menu to stand out visually
• Section content requires different color contrast

Responsive Behavior

Mega menus automatically adapt to different screen sizes:

Desktop Display

• Full mega menu content appears in dropdown
• Hover or click activation (depending on template)
• Multi-column layouts display side-by-side
• Maximum visual real estate

Tablet Display

• Slightly condensed layout
• May stack some columns
• Touch-friendly interaction
• Balanced content display

Mobile Display

• Mega menu content may collapse into standard dropdowns
• Single-column display
• Touch-optimized navigation
• Simplified for small screens

Tip: Always test mega menus on actual mobile devices, not just browser simulation tools.

Troubleshooting

Mega Menu Not Appearing

Check these settings:

• Mega Menu toggle is enabled on the page properties
• A section is selected in the dropdown
• The parent page appears in the main navigation menu
• Main Menu toggle is enabled for the page

Common causes:

• Page is hidden from main navigation
• Section was deleted or moved
• Template doesn't support mega menus (verify you're using Advanced Template)
• JavaScript conflicts preventing display

Section Not Available in Dropdown

Possible reasons:

• Section doesn't exist yet - create it first
• Section is a "mirror" type - only original sections can be used
• Database synchronization issue - try refreshing the page

Solution:

• Create your section content first
• Return to page properties
• The section should now appear in the dropdown

Content Not Displaying Correctly

Layout issues:

• Check section preview in page properties
• Verify section content on its original page
• Review "Use Advanced Properties" setting
• Test different viewport sizes

Styling problems:

• Toggle "Use Menu Font Colors" on/off to test
• Check if custom CSS is conflicting
• Verify images are loading
• Review template menu styles

Mega Menu Too Large or Small

Adjust section content:

• Remove or add columns to change width
• Adjust section padding settings
• Use responsive section properties
• Consider breaking into multiple shorter sections

Height considerations:

• Long mega menus may require scrolling
• Consider above-the-fold content
• Break very long content into categories
• Use progressive disclosure (show more buttons)

Links Not Working

Check for:

• Broken or outdated URLs
• Pages that have been deleted
• Incorrect relative vs. absolute paths
• Links blocked by JavaScript

Testing:

• Click each link in preview mode
• Test from live site navigation
• Use browser developer tools to check errors
• Verify link targets exist

Best Practices

When to Use Mega Menus

Good candidates:

• Top-level navigation items with many subpages
• Complex hierarchies needing visual organization
• Featured content deserving prominent placement
• Sites with 20+ pages in a section

Poor candidates:

• Simple sites with few pages
• Pages with only 2-3 child pages
• Content that changes daily (hard to maintain)
• Mobile-first sites (mega menus are desktop-focused)

Performance Considerations

Keep mega menus performant:

• Optimize all images for web (compress before uploading)
• Limit the number of images per mega menu
• Avoid embedding videos or complex media
• Test loading speed with developer tools
• Consider lazy loading for images

Accessibility

Make mega menus accessible:

• Ensure keyboard navigation works
• Provide adequate color contrast
• Use semantic HTML in sections
• Include descriptive link text
• Test with screen readers
• Don't rely solely on hover states

Maintenance Strategy

Regular upkeep:

• Review mega menu content monthly
• Update seasonal or dated information
• Test all links during reviews
• Archive outdated content
• Refresh featured items
• Monitor user engagement and adjust accordingly

Examples and Use Cases

Parish with Multiple Ministries

Setup:

• Enable mega menu on "Ministries" navigation item
• Create section with 3 columns:
  • Column 1: Spiritual Formation (Bible Study, Prayer Groups, etc.)
  • Column 2: Outreach & Service (Food Pantry, Hospital Ministry, etc.)
  • Column 3: Fellowship & Youth (Sunday School, Youth Group, etc.)
• Include small icons for each ministry
• Add brief 1-sentence descriptions

Result: Visitors can quickly scan all ministry offerings and find relevant opportunities.

Diocese with Multiple Departments

Setup:

• Enable mega menu on "Resources" navigation item
• Create section featuring:
  • Top row: Most-used resources with large icons
  • Bottom rows: Categorized links by audience (clergy, parishes, faithful)
• Use custom background color to distinguish from other menus

Result: Different user groups can quickly find relevant departmental resources.

Educational Institution

Setup:

• Enable mega menu on "Programs" navigation item
• Create section with:
  • Left column: Featured program with image and description
  • Center columns: Programs by age group
  • Right column: Quick links to registration and calendar

Result: Parents can explore educational offerings and find enrollment information easily.