Fullwidth Sub menu

Support
#1

Hi! :slight_smile:

I would like to make a fullwidth sub menu similar to this image attached,

Is this possible please?

Thanks!

#2

Hello @scope,

Thanks for writing in!

You can add following CSS and let us know how it goes:

ul.sub-menu {
width: 100%;
text-align:center;
}

ul.sub-menu li{display: inline-flex;}

Thanks.

#3

Hi!!

Thanks so much for your reply!

I tried the code and it turned out like this:

It seems that the width 100% is not taking the fullwidth of the menu and the text is not coming near each other :confused:

#4

Hi There,

Could you please provide us with your website URL so we can take a closer look?

Thanks.

#5

Hi Thanks so much! :slight_smile:

Website URL: http://mhn.scope.com.mt/

Thanks!

#6

Hi,

Please add this in Custom CSS as well.

.desktop .menu-item, .desktop .menu-item>a {
    position: static;
}

Hope that helps

#7

Thanks so much it worked!! :smiley:

I am a bit confused as my sub menu width is 100% and its still not full width :confused:

#8

Hello @scope,

Thanks for writing in! Regretfully, you will not be able to make a menu go completely fullwidth with the way X’s navigation system is structured. Also, instead of using any sort of custom CSS, I would highly recommend using X’s native megamenu system, which you can read more about in-depth here:

That article walks through how to setup a simple megamenu using X’s built-in systems. Alternately, if you find you need much greater control over your menus for your project, UberMenu may be a better choice for you: