Uber Menu not showing Full width in XPro Header

[dsthompson]

Hi, not sure what I am trying to achieve is possible with Ubermenu and XPro Header

I am trying a new header configuration on my staging site at https://mysalus.org - where I am trying to use uber menu in a single top-bar with other elements, and have the submenu show full width - screen shot attached.

I have uber menu settings to:
Horizontal alignment - automatic
Bound Submenu To - unbounded (and have noted Set to “Unbounded” if you want a submenu wider than the menu bar. The submenu will be bound by the next relatively positioned ancestor element in your theme. Only relevant for horizontally oriented menus.)

Is there a css solution to make the ubermenu submenu show full width without placing the ubermenu in its own bar - reference screenshot 2 where I currently have the ubermenu showing full width when the container is in its own separate bar, which is taking up more screen space than I would like.

Thank you

[rad]

Hi @dsthompson,

Thanks for reaching out.

There is, and it’s absolute positioning which is equivalent to this

Bound Submenu To - unbounded (and have noted Set to “Unbounded” if you want a submenu wider than the menu bar. The submenu will be bound by the next relatively positioned ancestor element in your theme. Only relevant for horizontally oriented menus.)

If you’ll implement that CSS (which we can’t provide), then you’re just repeating the same feature that is already there. But it will be more complex since the containing structure is a flex layout.

Hence, yes, you’re only limited to that setup with the combination of Ubermenu and Pro header.Like use the unbound option, or have it placed on its dedicated row (bar). Ubermenu have its own responsive setting too, trying to force it with custom CSS will only break it.

Thanks!

[dsthompson]

Thanks for this explanation Rad. Just to be clear on my end regarding your last statement, even though I have the uber menu set to be unbound, the ubermenu - which I have in a content area element - as [ubermenu config_id=“main” menu=“2”] needs to be on its own separate bar? Screen shot attached.

[ruenel]

Hello @dsthompson,

Thanks for clarifying. In that case, please create another bar and this bar should contain a content area element with the ubermenu shortcode. Make sure that container is 100% width so that your ubermenu will be fully 100%.

If you want to show/hide this bar exclusively, please make use of the “Hide During Breakpoints” option in the bar settings. To know more about the “Hide During Breakpoints” option, please check this out: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Hope this helps.