Uber Menu Full Width in PRO Header

[Noellemena]

Hello!

I am having an issue getting my Uber Menu to display full width inside a PRO header.
See screenshot in secure note. I have it on the page displaying the way I want, but cannot get it in the header where I want it.

It is also a mega menu design.

Thank you!!
Noelle

[ruenel]

Hello Noelle,

Thanks for writing in!

You are using UberMenu. If you want to make i fullwidth, you will have to set it in Ubermenu settings. You can do that in Appearance > UberMenu > Main UberMenu Configuration > Position & Layout.

Hope this helps. Please let us know how it goes.

[Noellemena]

Hey @ruenel

I do have it set Full width that is why it shows correctly in the screenshot where I have the short code on the actual page through PRO.

When I add the exact same short code to the PRO header I cannot get it full width for anything.
I will put the login.
Thanks!

[nabeel]

Hi @Noellemena,

Thank you for providing the credentials. I went ahead and added the following CSS in the Element CSS of the Text element that contains the shortcode:

$el {
  flex: 1;
}

You menu is fullwidth now. Please clear your browser’s cache and check your header now. Cheers!

[Noellemena]

Yes! Thank you!
So if I used that same CSS on other elements customize CSS it would make it flex full width as well. is that right? I have never used this one before.

$el {
flex: 1;
}

Thank you!!

[nabeel]

Hey @Noellemena,

The flex property only works if the parent element’s display is set to flex. You can learn more about Flexbox here https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Alternatively you can use the width property to span the element fullwidth of it’s parent container:

$el {
  width: 100%;
}

Cheers!