How to fullwidth menu?

Support
#1

Hi,
Im not on x-pro,

is there a way to fullwidth menu? its currently has padding on each side. which makes the menu double in stack size

thanks

#2

Hi there,

You may add some custom CSS to accomplish this like:

.x-navbar-inner .x-container.width {
    width: 100%;
    max-width: 100%;
}

.masthead-stacked .desktop .x-nav li {
    width: 16.6666%;
    text-align:  center;
}

.masthead-stacked .desktop .x-nav {
    display: block;
}

Please note that the code above will evenly distribute the width of the menu item and is specific for your current setup of 6 menu items.

In case you add or remove a menu item, please change the width value in the code.

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

1 Like
#3

that works, in the end i just use 6 for esthetic reason, but i like it that its distribute evenly horizontally,

thanks.

however the menu on the far right side is overflow off the screen and being displayed partially, is there a way to fix this?
thanks.

#4

Hi There @priatnasuardi

Upon checking your menu, I could not locate uneven menu items

If you’re referring to the sub-menu items, please try adding the following CSS rule also into your X > Theme Options > CSS area.

.masthead-stacked .x-navbar .desktop .sub-menu {
    left: auto;
    right: 10px;
}

Thanks!

#5

yes, i mean the sub menu, sorry for not being so clear.

let me try this.

thanks

#6

No problem, do let us know how this goes!

#7

super, thanks

#8

You’re most welcome!

#9

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