SOLVED - MegaMenu / Fullwidth dropdown submenus issue (Pro 2.1.6)

[Brabant]

Hi guys!

Although innumerable posts echo, and for more than one year, the legitimate PRO users expectations, it appears that, for obscure reasons, the .x-megamenu CSS class is still inoperative in the last PRO theme update…

Meanwhile, I have almost finished the local development of a new website, and spent considerable time perfecting each detail of the navbar, so you certainly understand that I don’t wish to go astray in the UberMenu labyrinthine system.

Now, would you be so kind as to indicate me a solution to constrain my dropdown submenus to be 80% fullwidth centered?

With thanks in advance,

B.

[nico]

Hi @Brabant,

Thanks for writing in.

At this time, not sure what you want to achieve. I believe that you have created your setup on your local setup and we could not be able to see if the suggested code if it is the right code. So, It would be best that you will upload your setup in a staging site that we could assess and share us a screenshot of the customization that you want to achieve.

Thank you so much.

[Brabant]

Hi guys!

As you can see in the ‘idealized’ version of my website (cf. enclosed screenshot), I’d just wish a solution to constrain my dropdown submenus to be 80% fullwidth centered, and distributed on two columns.

With thanks in advance,

B.

[ruenel]

Hello There,

If you want to reduce the width of the megamenu, please make use of this custom css code:

.x-navbar-fixed-top-active .desktop .x-nav .x-megamenu>.sub-menu {
    max-width: 900px;
    margin-left: -400px;
    left: 50%;
    right: auto;
}

The maximum width could be change to 80%.

Hope this helps.

[Brabant]

Hi guys!

This topic is precisely motivated by the fact that, for obscure reasons, the .x-megamenu CSS class is still inoperative in the last PRO theme update – while the screenshot above doesn’t reflect my actual website, and is just an illustration of the MegaMenu I would like (but without having to go astray in the UberMenu labyrinthine system).

Knowing that, the CSS code you provided is unfortunately ineffective, and I would appreciate a concrete solution for a rather basic option, implemented in X and most other WP themes.

With thanks in advance,

B.

[basanta]

HI There,

The menu design you have posted need Uber Menu plugins. There is no such option in theme to make similar look menu.
Uber menu plugins come with X theme no need for separate purchase.
Go to Dashboard -> X -> validation in extension section you can install the plugins.

Please check this for further info and help.

UberMenu | Themeco Docs

Thanks

[Brabant]

O.K., let’s be clear!

Primo: I was expecting a bit more professionalism and vigilance from THEMECO Support & THEMECO Development team than what I have observed with certain WP themes (like the AVADA infamy, which includes, at least, a MegaMenu by default) – all the more so that innumerable posts echo the legitimate PRO users expectations, to which your own staff promised a long time ago (cf. Aug '17 from your staff member @Joao): “We are looking into integrating this functionality in a NEAR FUTURE…”

So, instead of skirting round that MegaMenu sensitive subject and avoiding to provide me a well known solution (as it happens, a few simple lines of CSS*), it would be more respectful and productive to properly reply to my question.

Obviously, and for quoting you, “there is no such [.x-megamenu CSS class] option in PRO theme to make similar look menu”, since upgrading to PRO is equivalent, on this specific point, to downgrade below X limitations!

Furthermore, it is weirdly paradoxal that X theme customers can either use the .x-megamenu CSS class or the UberMenu plugin, whereas the PRO users have to get stuck with that indigestible plugin.

Secundo: As many users, the whole reason I upgraded to PRO was to access to a superior level of flexibility and design, without the necessity to activate a plethora of heavy/gasworks plugins (whether gratis or not) such as UberMenu.

Tertio: Beyond the fact that I have almost achieved a new website and spent considerable time perfecting each detail of the navbar, you certainly understand that I don’t wish to go astray in the UberMenu labyrinthine system.

Considering the situation, I would appreciate to know why your Development team is so reticent to implement such a basic function in PRO?

Sincerely,

B.

* Thanks to @Ricarditu, here is the simple few lines of CSS I have just discovered, which instantly allow to create a functional and customizable MegaMenu in PRO version:

@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: 50% !important;
float: left !important;
}
}

[christopher]

Hi Victor,

I read your reply all in details and I totally understand your current situation at the moment. I want to thank you for your comment and we will surely inform our leadership team regarding the points that you have mentioned.

Now please understand the situation here. There is NO megamenu element available in Pro header builder. So there is NO solution that we can give you as there is no option for this. We can add this as a feature request. The CSS code you used will do the layout part but it does not give the actual functionality which you will find in the normal header which uses the menu items positioning to create the feature like explained here.

I should repeat despite your dismay that the only actual solution for the megamenu is that you need to use the UberMenu. Using the UberMenu does not mean that you will lose all your Pro Header. The only section which will be replaced is the usage of the Inline Navigation element. Here is how you would do the integration.

So, despite all the legitimate points you have mentioned, there is no other solution than the one we already gave.

Thank you for your understanding.

[Brabant]

Hi Christopher!

First of all, I salute your appropriate and honest response.

As for the kind of basic MegaMenu I need, the fact is that the few simple lines of CSS kindly provided by @Ricarditu instantly allowed me to integrate (on two columns and with the identical style of my existing Headers/Inline Navigation elements/Dropdown menus) a clean, functional and customizable MegaMenu in the PRO theme version – nevertheless wishing that your leadership team deigns to pay attention to this recurrent issue.

Regards,

B.

[rad]

Hi @Brabant,

The CSS would be a case to case basis depending on the setup and your target renderings, like columns, spacing, size, position, and etc. The provided CSS on that thread will only apply 25% width (4 columns) with floating layout. The same layout used for section’s column.

If your target outcome is just adding columns regardless of content and structure, then that should be okay. But it’s not enough to work as full Megamenu, it’s not gonna respond or change the positioning (more CSS are needed to achieve that). Which is why it’s not simple to implement on the existing menu with complex structure, but this should be added on feature request list. We recommend using Ubermenu for now.

Thanks for understanding