I must tell you upfront that this is a challenging topic, even though Navi+ makes it easy for you to create a Mega Menu. However, there are many creative ways to implement it and technical hurdles to overcome to achieve the best experience. The article below will focus on one issue: How to completely replace your desktop header with another header along with the Mega Menu using Navi+. This is also one of the most frequently asked questions from our customers, who are often dissatisfied with menu systems that are either too simple to use or overly complicated and cumbersome. Follow this article to understand how one of the most common applications of Navi+ works on desktop and how it can provide you with useful value.
A Mega Menu is defined as follows: A Mega Menu is an expandable menu that displays navigation options to site visitors in a large, rectangular group. This option replaces scrolling and uses icons, tooltips, and typography to explain user choices. The Mega Menu supported by Navi+ is a menu system that allows you to create a menu tree with layers, unlimited menu items supporting images, icons, flexible interface configurations, and numerous advanced features such as animations, CSS, hover, and theme integration.
Another solution is to keep your current header and simply integrate a Mega Menu below it. This can reduce your workload and provide a more natural user experience. However, this is sometimes not feasible, as the header usually contains a menu. Most of the time, whether it’s a free theme or a premium one, they all face this issue—since there is plenty of space on the desktop, if you don’t place the menu in the header, what will you put there? This is the challenge that this article is meant to help you understand and address.
Some important points you need to consider:
- The Mega Menu for desktop usually won’t work on mobile. Why? The experience on mobile and desktop is entirely different. On mobile, icons are often placed above the text, and the number of menu items is typically fixed between 4 and 6. This is why the Bottom Bar is more frequently used and more effective on mobile. On desktop, icons are usually not used for level 1 menus, and the menu layout can be uneven due to varying text lengths. On desktop, you also need to position the logo and search tools next to the menu. Additionally, on desktop, you interact using a mouse and keyboard, whereas on mobile, there’s no mouse, no hover events, and the keyboard is a virtual one.
- You will need to hide the old header in your current theme, which usually requires a bit of technical know-how. Sometimes, older methods won’t work correctly (even with Shopify’s default Dawn theme), and you might need to insert a few lines of CSS into the theme. However, you can always contact the Navi+ technical team, and this will be an easy task.
- Navi+ Mega Menu operates as a section, which is important because it optimizes the user experience and page load speed. The advantage is that you can configure a different header for each page, and less important pages like the “page” section can continue using the current header without needing a replacement, while the product detail page might require deeper customization. However, the downside of this flexibility is that you will need to insert this section into each page manually, which can be repetitive, sometimes up to 20 times. This weakness can sometimes feel discouraging as it’s not the most intelligent approach, but trust in Navi+. We have chosen the best solution for your website’s experience after many trials and refinements.
Step 1: Start with a Mega Menu template.
You need to choose a Mega Menu template to begin. Some templates place the logo on the left, some place it in the center, and others use different colors and layouts for you to choose from. You can add and experiment immediately, as these templates are carefully designed, and the best options have been applied to demonstrate their feasibility on your website.
Step 2: Design your Mega menu and some key points to consider.
There are so many configurations in Navi+ that you will need a little time to get accustomed to them. We believe that once you are familiar with Navi+, everything will be much easier. However, here are some important notes to keep in mind when working with the Navi+ Mega Menu:
2.1. Choose the right “Width layout”
For level 1 menus, be sure to select “Width layout” as Hug content. This is very suitable for desktop since you won’t be able to evenly distribute in a 12-grid or 10-grid layout on mobile. Consequently, the menu space will expand according to the amount of text and the arrangement of icons.
Choosing “Width layout” as Automatic sometimes doesn’t work correctly. While it is a powerful tool on mobile for evenly distributing the remaining occupied space, on desktop it may not function well and could cause large gaps.
Choosing “Width layout” as Fixed width also proves to be ineffective, unless you select menus that only have icons. When you change the text, you won’t be able to “guess” what the fixed width should be.
2.2. Design the structure of the menu (main menu, logo, others…)
Divide the main menu area (to scale up) and the floating area (for example, centered logo and search on the right).
This is very important when designing your new header using Navi+. Typically, you will need an area—usually from the left corner to the right—for the main menu. When you add a new menu, it will scale and won’t risk overlapping.
Some websites prefer to position the logo in the left corner, with the main menu arranged from right to left.
To accomplish this, you’ll need an important property called Position, which only appears when you select Width layout as Hug or Fixed width. For example, if you want your logo to always be centered in the header, regardless of the main or secondary menus, which include the search icon, cart icon, and more, set the Logo menu items to Hug and “Float to center.” This way, the logo will always be centered in the header, regardless of screen size or the structure of other menus.
2.3. Some display configurations for desktop Mega menu
You can configure fonts, colors, icons, text, background, animations, etc., similar to mobile. There are so many features that you’ll need time to master Navi+ in an exciting way—I believe so. However, specifically for the Mega menu on desktop, pay attention to the following features:
2.3.1. You need to be mindful of the sub-menu size. When hovering/clicking on a menu item, the dropdown menu will be determined by the Sub Width text field, and this number depends on your content, images, or the structure of your sub-menu.
2.3.2. Pay attention to the mouse interaction when opening a sub-menu, which could be either hover or click. Sometimes, you can mix them, for example, using Hover for level 1 but Click for sub-menu level 2. In that case, select the menu item, choose “Tab Menu tree/Class names,” and enter navi-hover and navi-onhover to enable the mixing.
2.3.3. Be mindful of the direction in which the sub-menu at level 3 expands. Imagine: Level 1 to level 2 expands from top to bottom. Level 2 to level 3 expands from left to right (by default) or from right to left. This depends on the layout of the Mega menu you are designing.
Step 3: Publish your Mega menu on website
As I warned above, you’ll need to do quite a bit of work to publish your Mega menu on the website. However, the results will surely be worth the effort:
3.1. Choose the display configuration on the Navi+ app
You should only select to display on desktop and hide it on mobile. For mobile, you’ll need a separate menu specifically designed for mobile. In fact, a preferred strategy for mobile is to keep the default header and add a bottom bar that contains all of your navigation. Why? Because it’s closer to the user’s thumb than the mobile header, which is currently one of the UX best practices for mobile web and apps.
Copy the embed code, which will be in the format SF-0123456789. Follow the instructions to insert the Section in the theme. You can choose to make the menu automatically stick to the top of the screen when scrolling, depending on your needs.
3.2. Insert the Navi+ Menu as a section and configure it
When inserting it into the app as a section, our advice is to avoid placing it in the Header group and instead select the Template area just below the header. This prevents certain default configurations of Shopify from interfering. Then, fill in the following details:
- Embed ID: The code you copied in the previous step.
- It is not a sticky menu: Please check this box.
- Section title: This is relevant for grid menu sections, banners, info boxes, etc. For a mega menu, leave it blank.
- Full width: This will enable the background color to stretch across the full width of the screen around the Mega menu. Sometimes, for specific design choices, you might want to uncheck this, but by default, check it to ensure the menu displays well on ultra-wide desktop screens.
- Margin: This helps you adjust the spacing slightly at the top, bottom, left, or right. By default, this isn’t necessary for the Mega menu.
3.3. Repeat this process across all pages
There will be around 10-20 pages where you’ll need to insert this Section if you want to replace the header across all pages.
3.4. Hide the default header
Below is a method to hide the default header of Shopify’s Dawn theme. Sometimes, each theme will require a different approach. Don’t hesitate to contact us for assistance.
Thank you. Above are some key details you need to get started on completely replacing your website’s Header with the Navi+ Mega menu. You can watch the video below to get an idea of how it will look on your website. Wishing you success. Don’t hesitate to reach out to Khôi, the Navi+ support specialist, for help with any questions or difficulties.