fervor [>]CODING & CURIOSITY
FERVOR LEARNING SYSTEMTUTORIALS
← WordPress

WordPress / 10 MIN READ

Beaver Builder Mega Menu

Creating a Mega Menu with Beaver Builder

From the original Fervor library. Examples may use older package versions.

Creating a Mega Menu with Beaver Builder: A Step-by-Step Tutorial

A mega menu is a large, expandable menu that displays all options in a two-dimensional dropdown layout. It’s an excellent way to enhance site navigation, especially for websites with extensive content or complex structures. Beaver Builder, a popular WordPress page builder, offers the flexibility to design stunning mega menus. In this tutorial, we’ll walk you through creating a mega menu using Beaver Builder.

Table of Contents

  1. Prerequisites
  2. Step 1: Install Necessary Plugins
  3. Step 2: Create a New Menu in WordPress
  4. Step 3: Design the Mega Menu with Beaver Builder
  5. Step 4: Assign the Mega Menu to Your Theme
  6. Step 5: Customize and Style Your Mega Menu
  7. Conclusion

Prerequisites

Before you begin, ensure you have the following:

  • WordPress Website: A functioning WordPress site.
  • Beaver Builder Plugin: Installed and activated. Get Beaver Builder
  • Beaver Themer Add-On: For advanced theme customization, including header and menu design. Beaver Themer
  • A Compatible WordPress Theme: While Beaver Builder works with most themes, using a Beaver Builder-compatible theme like Beaver Builder Theme or Astra is recommended for optimal results.

Step 1: Install Necessary Plugins

  1. Install Beaver Builder and Beaver Themer:

    • Navigate to your WordPress dashboard.
    • Go to Plugins > Add New.
    • Search for “Beaver Builder” and “Beaver Themer”.
    • Install and activate both plugins.

  2. (Optional) Install a Menu Enhancer Plugin:

    • While Beaver Builder and Beaver Themer offer robust features, you might want additional functionalities.
    • Plugins like Max Mega Menu or WP Mega Menu can integrate with Beaver Builder for enhanced mega menu capabilities.
    • To install, go to Plugins > Add New, search for your chosen plugin, install, and activate it.

Note: For this tutorial, we’ll proceed without additional plugins, leveraging Beaver Themer’s capabilities.

Step 2: Create a New Menu in WordPress

  1. Access Menus:

    • In your WordPress dashboard, navigate to Appearance > Menus.

  2. Create a New Menu:

    • Click on “Create a new menu”.
    • Enter a name for your menu (e.g., “Primary Menu”) and click “Create Menu”.

  3. Add Menu Items:

    • On the left, select pages, posts, custom links, or categories to add to your menu.
    • Click “Add to Menu” for each desired item.
    • Organize your menu items by dragging and dropping them into the desired order.

  4. Set Menu Location:

    • Under Menu Settings, assign the menu to the desired theme location (e.g., Primary Menu).
    • Click “Save Menu”.

Step 3: Design the Mega Menu with Beaver Builder

To create a mega menu, you’ll design a custom layout that appears when users hover over a specific menu item.

  1. Identify the Parent Menu Item:

    • Decide which menu item will trigger the mega menu (e.g., “Products”).

  2. Enable CSS Classes for Menu Items:

    • In the Menus screen, click on Screen Options (top right).
    • Ensure CSS Classes is checked.
    • Expand the parent menu item and add a unique CSS class (e.g., mega-menu).

  3. Create a Beaver Builder Layout for the Mega Menu:

    • Navigate to Beaver Builder > Layouts (if available) or create a new page to design the mega menu layout.
    • Note: Alternatively, use Beaver Themer to create a custom menu template.

  4. Using Beaver Themer:

    • Go to Beaver Builder > Themer Layouts.
    • Click “Add New” and select “Menu Item” as the layout type.
    • Assign it to the specific menu item with the CSS class mega-menu.
    • Use Beaver Builder’s drag-and-drop interface to design the mega menu content. You can add rows, columns, images, icons, buttons, and more to structure your mega menu.

  5. Design Elements:

    • Columns: Use multiple columns to organize links into categories.
    • Widgets: Add widgets like search bars, contact information, or promotional banners.
    • Images and Icons: Enhance visual appeal with relevant images or icons.
    • Styling: Customize fonts, colors, and spacing to match your site’s design.

  6. Save Your Layout:

    • Once satisfied with the design, click “Done” and “Publish” to save the mega menu layout.

Step 4: Assign the Mega Menu to Your Theme

  1. Integrate the Mega Menu Layout:

    • If you used Beaver Themer, the layout should automatically associate with the specified menu item.
    • Ensure that your theme’s header is set up to display the mega menu. Some themes might require specific settings or compatibility.

  2. Configure Theme Header (If Needed):

    • Navigate to Appearance > Customize.
    • Go to Header Settings or the relevant section based on your theme.
    • Ensure that the menu location assigned earlier is active and supports dropdowns.

  3. Check Mobile Responsiveness:

    • Ensure that your mega menu is responsive and functions well on mobile devices.
    • Beaver Builder and Beaver Themer typically handle responsiveness, but it’s good to verify.

Step 5: Customize and Style Your Mega Menu

Fine-tuning your mega menu ensures it aligns with your website’s aesthetics and provides a seamless user experience.

  1. Edit the Mega Menu Layout:

    • Navigate back to Beaver Builder > Themer Layouts.
    • Locate your mega menu layout and click “Edit”.

  2. Customize Design Elements:

    • Typography: Adjust font sizes, styles, and colors.
    • Backgrounds: Add background colors or images to the mega menu area.
    • Spacing: Modify padding and margins for better layout.
    • Hover Effects: Implement hover animations or color changes for interactive elements.

  3. Enhance Functionality:

    • Dropdown Animations: Add slide or fade effects for the mega menu dropdown.
    • Interactive Elements: Incorporate elements like sliders, tabs, or accordions if needed.

  4. Optimize for Performance:

    • Ensure that images are optimized for web to maintain fast loading times.
    • Minimize the use of heavy scripts or excessive elements that might slow down the menu.

  5. Preview Changes:

    • Use Beaver Builder’s preview feature to see how the mega menu looks and behaves.
    • Test across different browsers and devices to ensure consistency.

  6. Finalize and Publish:

    • Once satisfied with all customizations, click “Done” and “Publish” to apply the changes.

Conclusion

Creating a mega menu with Beaver Builder enhances your website’s navigation, offering users an organized and visually appealing way to explore your content. By leveraging Beaver Themer and Beaver Builder’s intuitive design tools, you can craft a mega menu tailored to your site’s needs without delving into complex coding.

Tips for an Effective Mega Menu:

  • Keep It Organized: Group related links and avoid overwhelming users with too many options.
  • Maintain Consistency: Ensure the mega menu design aligns with your overall site aesthetics.
  • Prioritize Important Links: Highlight key sections or popular pages to guide user navigation.
  • Test Regularly: Continuously test the menu for usability and make adjustments based on user feedback.

By following this tutorial, you should now have a functional and stylish mega menu integrated into your WordPress site using Beaver Builder. Happy building!

Bonus Customizing Section

🎁 Bonus: Advanced Customization with Custom CSS Classes

While Beaver Builder and Beaver Themer provide extensive design options for creating mega menus, adding custom CSS classes allows you to fine-tune your mega menu’s appearance and functionality further. This bonus section will guide you through customizing your mega menu using custom CSS classes to achieve a unique and polished design.

📌 Table of Contents for Bonus Section

  1. Adding Custom CSS Classes to Menu Items
  2. Applying Custom CSS to Your Mega Menu
  3. Example Custom CSS Snippets
  4. Responsive Customization
  5. Using Custom Classes for Specific Elements
  6. Best Practices for Custom CSS

1. Adding Custom CSS Classes to Menu Items

To target specific menu items or sections within your mega menu, you’ll first need to assign custom CSS classes to them.

Steps:

  1. Enable CSS Classes:

    • Navigate to Appearance > Menus in your WordPress dashboard.
    • Click on Screen Options at the top right corner.
    • Ensure that CSS Classes is checked.

  2. Assign Classes to Menu Items:

    • Expand the menu item you want to customize (e.g., the parent item triggering the mega menu).
    • In the CSS Classes (optional) field, enter a unique class name (e.g., mega-menu-custom).
    • Click Save Menu to apply the changes.

    Assign CSS Class
    Example of assigning a CSS class to a menu item.

2. Applying Custom CSS to Your Mega Menu

Once you’ve assigned custom classes, you can target these classes in your CSS to style the mega menu.

Steps:

  1. Access the Customizer:

    • Go to Appearance > Customize in your WordPress dashboard.

  2. Navigate to Additional CSS:

    • In the Customizer sidebar, click on Additional CSS.

  3. Add Your Custom CSS:

    • Here, you can input your custom CSS code to style the mega menu based on the classes you’ve assigned.
    /* Example: Changing the background color of the mega menu */
.mega-menu-custom .fl-builder-content {
    background-color: #f8f9fa;
}

  4. Publish Your Changes:

    • After adding your CSS, click Publish to apply the styles to your website.

3. Example Custom CSS Snippets

Here are some common customizations you might want to apply to your mega menu:

a. Change Background and Text Colors

/* Background color of the mega menu */
.mega-menu-custom .fl-builder-content {
    background-color: #ffffff; /* White background */
}

/* Text color for menu links */
.mega-menu-custom .menu-item a {
    color: #333333; /* Dark gray text */
}

/* Hover effect for menu links */
.mega-menu-custom .menu-item a:hover {
    color: #ff6600; /* Orange text on hover */
}

b. Adjust Padding and Margins

/* Padding inside the mega menu */
.mega-menu-custom .fl-builder-content {
    padding: 30px 20px;
}

/* Margin between columns */
.mega-menu-custom .fl-row {
    margin-bottom: 20px;
}

c. Customize Typography

/* Font style for headings in the mega menu */
.mega-menu-custom .fl-module-heading h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    color: #0073e6; /* Blue headings */
}

/* Font style for paragraph text */
.mega-menu-custom .fl-module-rich-text p {
    font-size: 16px;
    line-height: 1.5;
    color: #555555;
}

d. Add Box Shadows and Borders

/* Box shadow for the mega menu container */
.mega-menu-custom .fl-builder-content {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Border around individual modules */
.mega-menu-custom .fl-module {
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 5px;
}

e. Style Buttons within the Mega Menu

/* Button styling */
.mega-menu-custom .fl-button {
    background-color: #28a745; /* Green background */
    color: #ffffff; /* White text */
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

/* Button hover effect */
.mega-menu-custom .fl-button:hover {
    background-color: #218838; /* Darker green on hover */
}

4. Responsive Customization

Ensure your mega menu looks great on all devices by adding responsive CSS rules.

/* Adjust mega menu padding on tablets */
@media (max-width: 992px) {
    .mega-menu-custom .fl-builder-content {
        padding: 20px 15px;
    }
}

/* Stack columns vertically on mobile devices */
@media (max-width: 576px) {
    .mega-menu-custom .fl-row {
        flex-direction: column;
    }
    
    .mega-menu-custom .fl-module {
        margin-bottom: 15px;
    }
}

5. Using Custom Classes for Specific Elements

For more granular control, assign custom classes to specific elements within your mega menu layout.

Steps:

  1. Edit Mega Menu Layout with Beaver Builder:

    • Navigate to Beaver Builder > Themer Layouts.
    • Find and edit your mega menu layout.

  2. Assign Classes to Elements:

    • Click on the element you want to customize (e.g., a button or image).
    • In the element’s settings, go to the Advanced tab.
    • Add a unique class in the CSS Classes field (e.g., promo-button).

  3. Add Custom CSS for Specific Elements:

    /* Style for the promotional button */
.promo-button {
    background-color: #ff5722;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.promo-button:hover {
    background-color: #e64a19;
}

6. Best Practices for Custom CSS

  • Use Specific Selectors: Ensure your CSS selectors are specific enough to target the intended elements without affecting others.

    /* More specific selector to avoid conflicts */
.mega-menu-custom .fl-module-heading h2 {
    /* Your styles */
}

  • Organize Your CSS: Comment your CSS sections for easier maintenance.

    /* === Mega Menu Background === */
.mega-menu-custom .fl-builder-content {
    background-color: #ffffff;
}

  • Test Across Browsers and Devices: Always verify your custom styles on different browsers and devices to ensure consistency.

  • Minimize Overuse of !important: Use !important sparingly as it can make debugging more difficult.

  • Backup Before Major Changes: Before implementing extensive CSS modifications, consider backing up your site to prevent potential issues.

🎉 Conclusion of Bonus Section

By leveraging custom CSS classes, you can elevate your mega menu’s design beyond the default capabilities of Beaver Builder and Beaver Themer. This approach provides the flexibility to tailor every aspect of your mega menu, ensuring it not only functions seamlessly but also aligns perfectly with your brand’s aesthetics. Whether you’re tweaking colors, adjusting layouts, or adding unique interactive elements, custom CSS empowers you to create a truly bespoke navigation experience for your website visitors.

Happy customizing!

Keep your curiosity going.Explore more WordPress →
287 TUTORIALS · 22 TOPICSREADY