X-Pro styles overriding Ubermenu submenu syles

Support
#1

I’ve successfully installed X Pro, designed a header and activated and configured Ubermenu.

When a sub-menu is triggered, the sub-menu’s width is narrower than the 3 column full width set in ubermenu. It appears this is due to the X Pro header overriding the Ubermenu styles somehow.

I have conducted these tests that lead me to believe the X Pro header is the cause and not ubermenu:

  1. If I load the same menu in the Ubermenu sandbox, the submenu appears full width as configured.
  2. If I add !important to every style in ubermenu’s ubermenu.css stylesheet, the problem still persists.
  3. I have attempted to add the Ubermenu to the X Pro using both the Navigation Inline and the Content Area with a short code. Both methods show the submenu restricted in width.

Can you please advise me of:

  1. Any known solution for such an issue
  2. Any way to have the ubermenu styles respected for the Navigation Inline or Content Area sections of my header
  3. Any other suggestions to integrate a mega menu. Each attempt I have made manual, jetmenu, ubermenu, etc does not work as the X Pro is somehow overriding the submenu styles and keeping teh submenu panels to a fixed width.
#2

Hi there,

Please provide us your URL in which you faced the problem…

Thanks.

#3

I have added a secure note with a live link to my local dev environment so you may see the page.

Please note the pro header’s menu section is repeated twice, as I have one setup as a navigation inline that uses the primary menu location for the theme. The second instance of the navigation links is a content area that contains the ubermenu shortcode to load the primary menu assigned to ubermenu:
[ubermenu config_id=“main” theme_location=“primary”]

Lastly, if the Ubermenu is working properly, upon mouse over services, you should see a full width submenu with three columns, each containing the word Divorce, Timesharing and Adoption respectively.

#4

Hello There,

Thanks for updating in! Please edit your header and in your bar, only use two containers. One for the logo and one for the menu so that the columns of the submenu will be wide enough. Please keep in mind that the ubermenu will only display within the bounds of the container. If it is narrower just like what you have now, there isn’t enough space to display the columns and would likely to overlap.

Hope this helps.

#5

Hello,

I have adjusted the header so the bottom bar has only one container.

The one container consists of the following elements:

  • Image (for the logo)
  • Navigation Inline (set to display the location primary menu that uses ubermenu)
  • Search Dropdown
  • Button (Phone Link)
  • Button (Get Started Button)

The one container’s self flex property is set to use the preset “fill space” so the entire container area is available.

Despite the above, the ubermenu sub-menu continues to be constrained. Lastly, I would like the ubermenu submenu to be full width, as you can see on the original ubermenu outside the pro header or the ubermenu demos. For some reason it appears the X Pro Header is restricting the Ubermenu containers.

#7

The UberMenu contains a setting to “unibind” the submenu from its parent. See:

#8

Hi there,

The Unbound option will not work inside the Header Builder and whatever you do , due to the nature of teh code in the Header Builder the menu will constrain to the container of itself.

I checked your website and now it shows the sub menu pretty wide. Would you please kindly tell us how you want the submenu to show? Maybe a screenshot of the with and withour header builder versions to be able to see what is the issue?

Thank you.

#9

Hi,

The way you see the menu is how it was to display. Full width would be preferred, but this is acceptable for a mega menu with multiple columns. I had to enable the unbound feature to get it to stretch almost full width, as shown in your screen capture. Note that in both the builder and on the site, this feature did work, as you can see by the extended menu width. So at this point, everything is working.

Thank you for your assistance.

#10

You’re welcome as always!
If you need anything else we can help you with, don’t hesitate to open another thread.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.