Uber Menu Submenu Width

Support
#1

Hi there,

I’m trying to change the width settings for the submenu on the ‘Regions’ section on the menu here: www.eurasianwhispers.com

At the moment when you hover over ‘Regions’ you can see that the submenu extends from the left edge of ‘About’ to the right edge of ‘Contact’, i.e. the full width of the menu at its current length.

Would it be possible, however, to change the settings so that the submenu always extends from the left edge of the house icon to just where the main content meets the sidebar?

Thank you!
EW

#2

Hello There,

Thank you for posting in! You may adjust the width in Ubermenu settings under the submenu item in Appearance > Menus. For more information, please check out the Ubermenu documentation right here: http://sevenspark.com/docs/ubermenu-3/settings/submenu/width

Hope this helps.

#3

Hi Rue, I managed to get it to work.

But now I’m having a problem getting the main menu to space properly. I can’t seem to get the magnifying glass to position itself to the far right of the black bar (you can see where it should be by hovering over it and seeing its corresponding search submenu which is in the right location)

All the other menu options I want to remain aligned to the left.

I think the problem is that when I go into the header creator, the widget area (i.e. the ubermenu) does not take up the full space that is available within its corresponding container (in this case ‘largest’).

Do you know how I can get the element to spread out within its container? I have tried fiddling around with the flex layouts and that hasn’t worked. I’m not sure if it’s a problem to do with the Ubermenu settings or the header settings…

Thanks,
EW

#4

Hi there,

It already in far right, but, your overall navigation’s width isn’t the same as black bar.

You can do this, inspect your widget element and go to customize section, then add width: 100% !important; to its Style input field. Then add this custom CSS

@media ( min-width: 980px ) {
.ubermenu .ubermenu-item.ubermenu-item-level-0 {
float: left !important;
}
#menu-item-845 {
float: right !important;
}
}

Thanks!

#5

Hi Rad,

I don’t quite understand here:

I go to the header creator in cornerstone, inspect the widget area under the element column, click on customize, but there under ‘setup’ the only options are ID, class, and hide during breakpoint - I can’t see any style input field… Could you help me out here?

And when you say add CSS, do you mean that I need to add this in the ‘Header CSS’ area or the ‘Global’ one?

Thank you,
EW

#6

Hi EW,

We can add it on the Header CSS.
On the Custom Tab, class field, add specific class then let’s define it instead. For example, add fullwidth-widget on the class field and then also add this CSS:

.fullwidth-widget{
  width: 100% !important;
}

Hope this helps.

#7

Hi Lely,

That’s great, thank you.

Would it also be possible to have all of the main menu options (except for the search icon) aligned to the left rather than the centre?

Cheers,
EW

#8

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

ul#ubermenu-nav-main-18 {
    text-align: left;
}
#9

Thank you, Thai, that works perfectly.

#10

You are most welcome. :slight_smile: