Pro MegaMenu

Hi, I’m struggling to get a Mega Menu created using Pro Headers. The Uber Menu plugin doesn’t work, and the x-megamenu col-4 class on the menu items isn’t making any difference either. Do I have to specifically design and set-up the MegaMenu in Pro Headers or is there a simpler way to achieve it?

Hi,

No need to use pro headers, you can achieve that using X native menu.

Kindly refer to the link below.

Hope that helps.

But I want to use ProHeaders as I have a bespoke header format which is already designed and working, I just need the Dropdown Menu (set in Headers as a ‘Navigation Dropdown’ element) to drop a mega-menu rather than a standard dropdown.

1 Like

Hi There,

Unfortunately Megamenu integration with Pro Header Builder.

If you need megamenu you will need to stick with X legacy header.

We are looking into integrating this functionality in a near future, but we cannot provide an ETA.

Hope it clarifies.

But the whole reason I upgraded to Pro on this build was to integrate a bespoke header, the Legacy header doesn’t have the flexibility of design needed. Can you advise an alternative way of getting a MegaMenu integrated in a Pro header please.

Works with text widget and short code.

Ah, so I could do a Content Area Dropdown? What shortcode do you suggest?

sorry i may have jumped the gun, are you using ubermenu ? on the settings page (Manual Integration) there is a list of short codes with your menus, just drop that in a text widget on the header builder.

Hi @Diabolicalname

I Understand your point, but as they are not integrated, if you need a megamenu, stick with X or use legacy on PRO until they are integrated which we do not have an ETA yet.

You could try to add the Ubermenu shortcode on a text element, it could possibly work although I haven’t tested, but don’t think so it is the cleanest solution.

Can you provide the mockup of the design you are aiming for, we may be able to assist you to achieve something similar on legacy header itself.

Thank you

There are specific mobile breakpoint elements which I need to carry through as well, see the attached secure note for link

Hi there,

What do you mean by specific mobile breakpoints? You mean create mega-menu from scratch? The existing one is not yet integrated into Pro header, your only options, for now, is create it from scratch or use Ubermenu.

Unfortunately, we can’t help you create it from scratch with different breakpoints.

Thanks!

Hey Rad,

Main reason I bought Pro was the header builder and the mega menu; was devastated to learn they didn’t work together.

I’ve been waiting a few months for this feature so I can set my new site live - updated to the latest version this morning and still nothing.

Could you give an update on when this will be integrated?

Really excited, as this will make Pro my go-to theme…

Cheers,

Hi @Gungurru,

Thanks for writing around! We don’t have a date yet but rest assured that this has been noted down and we are working to address it as quickly as possible, but we have some other items in the “pipeline” for the time being.

Thank you for understanding.

I have a work around for this:

  1. Create your Uber Menu as normal
  2. Generate the shortcode here: Appearance > UberMenu > Manual Integration > Integrate Specific Menu (Choose your menu)
  3. Copy the shortcode and go to your pro header editor (should look like this: [ubermenu config_id=“main” menu=“2”])
  4. In place of your inline navigation (and your collapsed as well really as Uber handles its own responsive behaviors), create a Content Area item and paste your shortcode there
  5. Your UberMenu is now simply an element in the Pro Header builder. Mange the menu design/structure/content as normal.

So far, this is working for me just fine. However, there should really be more of a native integration to simplify this workflow.

Thanks all!

Hi,

Thank for sharing a workaround.

Have a nice day! :slight_smile:

Hi!

I don’t know if this helps but I was trying some tweaking and was able to get this:
http://www.realperitos.com/novosite
(it’s still in early stage of production)

Here’s the custom CSS I used:

/****** MEGAMENU ******/
@media only screen and (min-width: 980px) {
  .menu-item-has-children { position: inherit; }
	.menu-item-has-children>ul { width: 100% !important; }
	.menu-item-has-children>ul>li {
	  width: 25% !important;
	  float: left !important;
	}
}

Apart from this, just applied some padding and styling to sublinks. Still have to custom it a bit more.

It’s not the perfect solution but until Megamenu comes to Pro, it works! :slight_smile:

1 Like

@Ricarditu

Thanks for sharing!

Hi @Ricarditu

I hope you dont mind but can i ask what you used to do the logo carousel at the bottom of the your page: http://www.realperitos.com/novosite/ ?

Its where they go full width and change to colour on hover. Its exactly what i am after for a project that i am working on.

Thanks.

Hi @King,

I believe he is using : https://wordpress.org/plugins/wp-logo-showcase-responsive-slider-slider/

But maybe he can confirm you if you send a message to him directly.

Thanks

Hi @King!

Sure, no problem. I’m using a premium plugin called “Logos Showcase - Multi-Use Responsive WP Plugin”, available on Codecanyon:

The one @Joao mentioned might work as well, I don’t know because I never used it but being free, just give it a try! :wink:

Thanks!