Skip to main content

This article helps community managers and administrators set up the Mega Menu widget in customization mode in Destination.

Overview

The mega menu bar in the community serves as the main navigation for your community users. This menu bar helps users to access primary sections of your community effortlessly. You can configure the mega menu bar through its widget in customization mode in Destination.

 

Configure Mega Menu Widget

The MEGA MENU widget contains four sections: CONTENT, IMAGE, LAYOUT, and STYLE. Each section allows you to configure the navigation elements and set your preferred style of the mega menu bar.

Configure Content

The CONTENT section displays a list of out-of-the-box and customized pages created in Control. This section helps your community users easily access main pages of the community.

To configure the CONTENT section:

  1. Log in to Destination.
  2. Click Customize. The customization mode is activated.

     

  3. Hover on the Mega Menu widget.
  4. Click the pencil icon. The Mega Menu slide-out panel appears.

     

  5. Expand the CONTENT section. The list of community modules appears.
  6. In the CONTENT section, you can perform the following actions:
    • Edit the display names of the existing modules.
    • Manage the visibility of each item using the eye icon.
    • Reorder the page display sequence using the drag-and-drop operation.
    • Add custom links. To add:
      1. Click Add custom link. A custom link panel is added.
      2. In the custom link panel, provide the Name and URL of the custom link.
      3. (Optional) Select the Open in new tab checkbox.

         

  7. Click DONE.
  8. Click Publish. The changes are published and visible to community users.

     

Configure Image

The IMAGE section allows you to display a desired visual next to the navigation elements. It can be your company or community logo or any image you would like to upload.

To configure the IMAGE section:

  1. In the Mega Menu widget, expand the IMAGE section.
  2. Select one of the following options:
    • Display logo inherited from Branding: This option populates the logo assigned in the Branding configuration options.

       

    • Display a different image: This option allows uploading an image from a local drive. To upload the logo image.
      1. Click Upload Image.
      2. Select and upload the image from your local drive.
      3. (Optional) Crop the image as required.
      4. Click Save.

         

    •  No image: This option does not display any image in the navigation bar.

       

  3. Click DONE.
  4. Click Publish.

Configure Layout

The LAYOUT section allows you to choose how the navigation pages appear in the Mega Menu widget.

To configure the LAYOUT section:

  1. In the Mega Menu widget, expand the LAYOUT section.
  2. Select one of the following options:
    • Default width: This option lists navigation pages across the content width on the community page.
    • 100% width: This option lists navigation pages across the entire width of the community page.

       

  3. Click DONE.
  4. Click Publish.

Configure Style

IMPORTANT: With release of the STYLE section in the Mega Menu widget, the Customization > Navigation page in Control is deprecated. Users with access to Control can make changes in the color styling through this widget.

The STYLE section allows you to change the color styling of texts, icons, border, and other elements in the Mega Menu widget.

To configure the STYLE section:

  1. In the Mega Menu widget, expand the STYLE section.
  2. In the STYLE section, the following options are available:
    • Background color: Sets the background color of the Mega Menu widget.
    • Menu text and icon color: Sets the color of the text and icons appearing in the widget. Select the Use text color checkbox to revert to the default Text color set in the Theme > Colors configuration.
    • Top Divider: Sets the top border color of the widget. Select the Use border color checkbox to revert to the default border color.
    • Bottom Divider: Sets the bottom border color of the widget. Select the Use border color checkbox to revert to the default border color.
    • Misc. Elements: Sets the text color for login and registration text (when logged out), and text for create and icon (when logged out). Select the Use brand color checkbox to populate color from the Branding configurations.

       

  3. Click DONE.
  4. Click Publish.

If you have any queries or feedback, please drop an email to docs@gainsight.com or post a reply to this article.

Hi there, 

Would you like to activate this cool new widget for our community as well? :sunglasses:

Hi @Moller Toma , I just enabled it for you on your staging environment so you can test. Let me know once you'd like to have it enabled for your prod environment. 

 

hi! I have mega menu enabled and in the process of configuring it can’t sort out how to do the drop down menu, like you have in the menu here. Is that a current option for us or something that’s coming in the future?

 

Hello @mhuddleston , currently the dropdown is only available for the Community and Knowledge Base modules. It automatically appears with the parent and child categories of those modules. In the future, we wish to allow you to set up any kind of custom dropdown!

Can we edit the options in the Community drop-down? I would like to show the Parent Categories only. I don’t want to have a scrolling drop-down menu:

 

 

Hello @alexandra.culler currently the Mega Menu doesn't offer that setting. But I'm noting it down for it to be a potential improvement for when we iterate on the Mega Menu. Thanks a lot :)

Hi all,

Where can I change the bg color of the mega menu?

Hi @Rodrigo - I found this can be done in Control. Navigate to Customization...Navigation and there will be some options for styling the Mega Menu there:

 

 

Hi @Rodrigo - I found this can be done in Control. Navigate to Customization...Navigation and there will be some options for styling the Mega Menu there:

 

 

Tks!

I want that navigation (mega menu) can be seen all the time, top of the page when using mobile device, as a “sticky”, is it possible and if yes how to do that?

Hi @revote ,

Just so you’re aware, this comment was posted by a community volunteer.

Personally, I wouldn’t recommend having a sticky Mega Menu on mobile, because the experience would be horrible unless you have a giant foldable like a Samsung Galaxy Z Fold 4. Those are the only kind of smartphone where you could potentially chuck in a full Mega Menu and get away with it while the device is in unfolded mode. Other that that though, it wouldn’t work well.

The current implementation is more or less pretty standard across the Web and most people are usually OK with how it works. You ideally want to maximise the available area for content, rather than navigation after all!

We have in our current community solution where navigation is all the time visible, top of the page. Works nicely.

Our users have tested our inSided based test community and I got feedback about the navigation. When it isn´t visible all the time you have to scroll down/up all the time and I agree with that.

But thanks, it seems there is nothing we can do with that.

No worries.

It’s a complicated one but I personally prefer not having sticky navigation on the Mobile Web, because it eats into valuable screen space that could be better used for something else.

Remember that not everyone has giant foldables and there’s definitely users who have smartphones that are way smaller than 6 inches!

Here is example about inSided based community with sticky "home bar” in mobile https://community.greenlight.guru 

Navigation would work just like that.

That has been achieved using custom HTML that someone built specifically for that community. You’d be welcome to do that for your own community if you’d like to, but I’d echo the advice inSided gives about having a professional web developer do it with you.

I’m not sure this would be made a built-in feature though.

Yes, I just ment that bar works nicely and there are customers using inSided and sticky bar. And yes, it is custom bar and I need help to build that.

Hello @alexandra.culler currently the Mega Menu doesn't offer that setting. But I'm noting it down for it to be a potential improvement for when we iterate on the Mega Menu. Thanks a lot :)

Is there any development on this? We would like our Mega Menu to show only the parent categories.

@Sudhanshu Hi! Hope you are doing well! Our mega menu looks like a bit pressed when the user go to other page. Is it possible to adjust the dimension? 

Other pages:

Home page:

Thanks!

Why the search appears only in the other pages, not in the Home page as well?

I cant remember how it goes in our community, now I am writing here with my mobile so I cant test it.

'

Hello @alexandra.culler currently the Mega Menu doesn''t offer that setting. But I''m noting it down for it to be a potential improvement for when we iterate on the Mega Menu. Thanks a lot :)

Is there any development on this? We would like our Mega Menu to show only the parent categories.

Agreed and this item is planned. You could vote it up

 

'

Why the search appears only in the other pages, not in the Home page as well?

I cant remember how it goes in our community, now I am writing here with my mobile so I cant test it.

This seems to be normal behaviour.

@Gabriel Fernando Maybe you edit the copy´s there, use shorter names?

Reply


Terms & ConditionsCookie settings