GeneratePress Mega Menu – WordPress Mega Menu without bloat

Build an amazing WordPress mega menu using GeneratePress Elements and GenerateBlocks Tabs. The mega menu will be easy to edit, responsive, accessible and visually appealing. You can set one up in just 5 mins!

GeneratePress theme does not come with a mega menu by default. The theme author believes that not everyone would use it and it adds a decent amount of CSS. I agree! Most mega menu plugins add a lot of code and end up slowing your website. I realise that most mega menus are poorly designed and not fully accessible.

Download PDF copy of this post

Hover over these links to see the mega menu in action

Step-by-step instructions to set up simple mega menu in just 5 mins

Watch this short video to set up your own mega menu in just 5 mins

The idea is very simple and just 2 steps:

1. Use GeneratePress Elements to display your mega menu. You can hook the block element to display below the header. Checkout the GeneratePress hooks visual guide.
2. Use the GenerateBlocks Tabs Block to create the interactive mega menu and add all the content.

How to show tab contents on hover

Watch this short video where I show how to convert GenerateBlocks Tabs that are usually clicked to display contents into opening when hovered.

Add the CSS class megamenu to the Tabs main container. Create a Close tab with mega menu-close class. This allows us to create a proper megamenu effect by closing when users hover outside the menu.

Add an additional Tab (empty) for closing the menu.

Add an additional empty Tab (1) for closing the menu. The tab can be visually hidden (2) by adding 2 CSS classes megamenu-close screen-reader-text.

Copy-paste the below code into Custom HTML block your GeneratePress Element.

<script>
const tabButtons = document.querySelectorAll('.megamenu .gb-tabs__button');
const megaMenu = document.querySelector('.megamenu');
const megaMenuClose = document.querySelector('.megamenu-close');

tabButtons.forEach((tabButton) => {
  tabButton.addEventListener('mouseover', () => {
    tabButton.click();
  });

megaMenu.addEventListener('mouseout', () => {
    megaMenuClose.click();
  });

});


</script>

What is a Mega Menu?

A mega menu is a type of navigation menu that displays a large number of options in a multi-column and multi-level format. It is designed to help users easily navigate through a website with a lot of content or complex structure. A mega menu usually appears as a drop-down menu that expands to show multiple columns of links, images, or other content. It provides a visually appealing and organized way for users to find the information they are looking for. Mega menus can be particularly useful for websites with a wide range of categories or subcategories (like eCommerce stores), as they allow users to access all the content directly from the main navigation menu without having to click through multiple pages. Additionally, mega menus can also highlight important or popular pages, showcase featured products, or display images and descriptions, making it easier for users to discover new content. 

Importance of a well-designed menu on a website

A well-designed menu on a website is of utmost importance for several reasons. Firstly, it enhances the user experience by making navigation smooth and intuitive. A clear and organized menu structure ensures that visitors can easily find the information or pages they are looking for, reducing frustration and improving overall site usability. Secondly, a well-designed menu can help improve the website’s search engine optimization (SEO). Search engines rely on the website’s structure and navigation to understand its content and rank it accordingly. By creating a well-structured menu with relevant keywords and descriptive labels, the website becomes more accessible and discoverable to search engines, potentially increasing its visibility and driving more organic traffic. Additionally, a well-designed menu also contributes to the overall aesthetics and professionalism of the website. It creates a positive first impression, establishes credibility, and reflects the brand’s identity. Overall, a well-designed menu is crucial for enhancing user experience, improving SEO, and creating a visually appealing website. 

How to hide the primary menu?

If you need to hide the primary or secondary menu, you can do so by hiding it on an individual post or page using the Layout metabox in GeneratePress theme.

From the GeneratePress Layout Metabox on bottom right corner of block editor screen, select Primary Navigation checkbox to hide it.

Use the GeneratePress Layout element to set the same options used to in the Layout metabox for a page/post, but on a site-wide scale. From the element, select Disable Elements and then select Primary Navigation checkbox to hide it site-wide (as per the Display Rules).

Why do I recommend GeneratePress?

I have custom designed my themes from scratch for every website that I built, that is until I came across GeneratePress Premium. Once I saw their clean coding standards and quality customer service, I was sold!

GeneratePress is my go to theme for all of my own and client WordPress projects.

At just 7.5KB, it is the perfect lightweight theme for your next project with over 5 million Downloads, 1000+ 5 star reviews, and 100,000+ Happy customers.

The best part – you can build unlimited sites for less than $60 (with a 40% renewal discount).

Why use GenerateBlocks to create your mega menu?

GeneratePress is my go to theme for all of my own and client WordPress projects. I pair it with GenerateBlocks to make it a complete blocks based website builder. With the addition of Tabs and Accordions, creating interactive websites is a breeze. The only missing piece is a slider.

Do you need a mega menu?

Mega menus are a popular navigation solution used on websites to make it easier for users to find the content they are looking for. But are they necessary for all websites? The answer to this question depends on various factors such as the complexity and size of the website, the number of categories and subcategories, and the target audience. If a website has a large number of categories and subcategories, a mega menu can be a great tool to organize and display the content in a way that is accessible and user-friendly. Mega menus provide more space and flexibility compared to traditional dropdown menus, allowing for the display of images, icons, and even short descriptions for each category. This can greatly enhance the user experience, making it easier for visitors to navigate through the website and find the information they are looking for.

On the other hand, if a website has a small number of categories and subcategories, a mega menu may not be necessary. In such cases, a simple dropdown menu or a navigation bar can be sufficient to provide users with the necessary navigation options. Implementing a mega menu on a website that does not require it can result in unnecessary complexity and confusion for users. It is important for website designers and developers to consider the specific needs and goals of the website before deciding whether or not to implement a mega menu.

Furthermore, the target audience of the website should also be taken into account. If the website caters to a tech-savvy audience who are familiar with mega menus, implementing one can enhance their browsing experience and make it more enjoyable. However, if the target audience consists of individuals who may not be accustomed to mega menus or have limited experience with technology, a more simplified navigation structure may be more appropriate. 
In conclusion, the decision to implement a mega menu on a website should be based on careful consideration of the website’s complexity, size, and target audience. While mega menus can provide a great user experience for websites with a large number of categories and subcategories, they may not be necessary for smaller and simpler websites. It is important to prioritize usability and accessibility when designing website navigation, ensuring that users can easily find the content they are looking for.

Comparison with other mega menu plugins available for WordPress

Tips and Tricks for Using Mega Menu Effectively

A. Organise menu items for a better user experience

When it comes to designing a website, one of the most important aspects to consider is the menu. A well-organized menu can greatly enhance the user experience and make it easier for visitors to navigate through the site. One popular option for organizing menu items is through the use of a mega menu. This type of menu allows for a more visually appealing and user-friendly display of menu items. With a mega menu, website owners can categorize their content into different sections, making it easier for users to find what they are looking for.

For example, a clothing retailer could have sections for men’s, women’s, and children’s clothing, each with subcategories for shirts, pants, and accessories. The mega menu can then display these categories in a visually appealing and easy-to-use manner. The WordPress Block Editor (Gutenberg) is a user-friendly interface where website owners can effortlessly create good looking mega menus. Using GenerateBlocks you can choose different layout styles, colours, and fonts. You can include images, galleries, tables and buttons. If using an eCommerce plugin like WooCommerce you can use their product and category blocks in your mega menu.

With a well-organised and visually appealing mega menu, visitors to a website can easily find the content they are interested in and navigate through the site more efficiently. This not only improves the user experience but also increases the likelihood of users staying on the site longer and making more purchases. Therefore, it is crucial for website owners to carefully consider their menu organization and utilize tools such as mega menus in order to create a better user experience and ultimately drive more traffic to their site. 

B. Utilise images and icons to enhance visual appeal

In today’s digital world, a visually appealing website is essential for attracting and engaging users. One effective way to enhance the visual appeal of your WordPress mega menu is by utilizing images and icons. These elements can help break up the text-heavy layout of a menu and provide a more visually curated experience for visitors.

GenerateBlocks offers a wide range of options for creating and customising content in WordPress. By utilising this plugin, you can easily incorporate images and icons into your mega menu design. Images can be used to showcase your products, highlight menu categories, or simply add visual interest to the menu. Icons, on the other hand, serve as visual cues that can help users quickly identify and navigate to the desired section of the menu. When choosing images and icons for your mega menu, it’s important to ensure that they are relevant to your website’s content and brand identity. Consistency in design and imagery will help establish a cohesive visual experience for users. Additionally, optimising the size and format of images is crucial for maintaining fast load times and ensuring a smooth user experience.

So, whether you are running an e-commerce store, a blog, or a multimedia website, incorporating images and icons into your WordPress mega menu can greatly enhance its visual appeal and improve user engagement. Your menu will not only look more visually appealing but also be more user-friendly and intuitive, making it easier for visitors to navigate and find the information they are looking for. 

C. Integrate custom content for promotional purposes

When it comes to promoting your business or website, integrating custom content for promotional purposes in your WordPress mega menu can be a game-changer. Mega menus have gained popularity due to their ability to display a large amount of content in a user-friendly manner. By utilizing the mega menu feature in WordPress, you can create visually appealing and engaging menus that incorporate your custom promotional content.

Use GenerateBlocks to showcase promotional banners, offers, or any other type of content in a visually appealing and impactful way. Whether you want to display a special discount for a limited time, highlight a new product or service, or simply direct visitors to specific sections of your website, custom content in your mega menu can help you achieve these goals effectively.

With the help of GenerateBlocks, you can design stunning content blocks without any coding knowledge. The block editor provides you with a variety of pre-designed templates and drag-and-drop functionality, making it easy to customize your content according to your branding and promotional needs. Furthermore, GenerateBlocks offers responsive design options, ensuring that your custom content looks great across different devices. you can create grid layouts and invective tabs and accordions.

Entice visitors to explore and engage with your website further! 

D. Test and optimise the menu for mobile devices

As mobile devices have become the primary means of accessing information and browsing the internet, it has become crucial for website owners to ensure that their websites are optimized for mobile viewing. This includes ensuring that even complex elements, such as mega menus, are user-friendly on mobile devices. In the case of WordPress websites, one popular option for implementing mega menus is by using the GenerateBlocks plugin.

To test and optimize the WordPress mega menu for mobile devices, it is important to first ensure that the GenerateBlocks plugin is installed and activated on the WordPress website. This plugin allows users to create and customize responsive grids that adapt to different screen sizes. During the testing phase, it is advisable to pay close attention to the responsiveness of the mega menu. This involves checking if the menu collapses or expands smoothly when viewed on different screen sizes. Additionally, it is important to test the touchability of the menu items to ensure that users can easily navigate through the menu on touch-enabled devices.

After identifying any potential issues, it is time to optimize the mega menu for mobile devices. This can be achieved by implementing responsive design techniques, such as using media queries to adapt the menu’s layout and styling based on screen size. For example, the menu may need to be simplified or rearranged to fit smaller screens, or certain elements may need to be hidden or resized.

Provide a seamless user experience across all devices. 

Examples of Websites Using Mega Menu

Mega menus have become increasingly popular in website design, especially among e-commerce websites. These menus offer a unique and efficient way to display a large amount of information, making it easier for users to navigate through a site.

Apple [https://www.apple.com/au/]

Quick Silver [https://www.quiksilver.com.au/]

Walmart [https://www.walmart.com/]

FAQs about GeneratePress Mega Menu

Are Mega Menus good for SEO?

 Mega menus have become increasingly popular in web design due to their ability to create a visually appealing and user-friendly navigation system. However, when it comes to their impact on SEO, there are mixed opinions.

• PROS: On one hand, mega menus can provide a greater number of internal links, allowing search engine crawlers to more easily navigate a website and discover its content. This can result in improved indexation and visibility in search engine results pages (SERPs). Additionally, mega menus can enhance the overall user experience by making it easier for visitors to find the information they are looking for, which could potentially increase engagement metrics such as time on site and reduce bounce rates. 
• CONS: On the other hand, overly cluttered mega menus with excessive links and text can be seen as spammy by search engines and negatively impact SEO. Excessive links can dilute the authority of a website, as search engines may view it as potentially manipulative and penalize it accordingly. Furthermore, if the links within the mega menu are not relevant or do not provide useful information, users may be discouraged and navigate away from the site, resulting in a high bounce rate. It is crucial, therefore, to strike a balance between offering a comprehensive navigation system and keeping the mega menu structured and user-friendly. Additionally, it is important to optimize the content within the mega menu by incorporating relevant keywords and making it easy for search engines to understand the structure of the website. 

Overall, while mega menus can be beneficial for SEO if implemented correctly, it is essential to consider the potential pitfalls and ensure that the design and content elements align with both user experience and search engine best practices. 

Avoid creating mega menus that display on hover.

How do you create a mega menu in Generatepress?

GeneratePress theme does not come with a mega menu by default. The theme author believes that not everyone would use it and it adds a decent amount of CSS.

In this post I showed you how to use GeneratePress Element to display a GenerateBlocks Tabs to create a simple yet appealing Mega Menu.

If you are after a simpler mega menu that uses the default WordPress menu and some custom CSS, checkout GeneratePress Docs – Building a Simple Mega Menu.

Can you suggest some WordPress plugins to create mega menu?

If you are using GeneratePress and GenerateBlocks, I would recommend you avoid the extra bloat.

While there are several free WordPress Mega Menu Plugins, there are two that stand out:

• Max Mega Menu
• QuadMenu

Both plugins have pro versions that provides additional features.

Conclusion

If you are looking to enhance the navigation experience on your website, then it is time to give the GeneratePress Mega Menu a try. The Mega Menu feature offers a seamless and efficient way for visitors to navigate through your website’s various sections and pages. With its user-friendly interface and customizable options, you can easily create a visually appealing and organized menu that not only showcases your site’s content but also improves user experience. By using the GeneratePress Mega Menu, you can easily display multiple columns, add images, icons, or even widgets to provide additional information or functionalities to your website users. Moreover, this advanced menu option can be customized to match your website’s overall design and branding, ensuring a cohesive look and feel. Don’t let your website’s navigation become a struggle for your visitors – take advantage of the GeneratePress Mega Menu and make it easier for them to find what they are looking for. Your readers will appreciate the simplicity and convenience of navigating through your website, and you will see an increase in engagement and conversion rates.

So, why wait? Try the GeneratePress Mega Menu today and elevate your website’s navigation to a whole new level. Comment below on how you went.