Docs

[DotComID]

Dear Support,

How do I set the width of the sub menu and how to minimize the distance between menus.

Regards,

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[DotComID]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for updating. I think it looks better the way it’s right now but if you still want to modify, you can add this under Custom > CSS in the Customizer.

.x-megamenu.col-4 .sub-menu {
  max-width: 900px;
}

.x-megamenu.col-3 .sub-menu {
  max-width: 900px;
}

.desktop .x-nav .x-megamenu > .sub-menu > li > a {
  line-height: 1.2;
}

Let’s set the max-width values to your own desired width.

Thanks

[DotComID]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.x-navbar-static-active .desktop .x-nav .x-megamenu>.sub-menu, .x-navbar-fixed-top-active .desktop .x-nav .x-megamenu>.sub-menu {
    left: 14%;
}

Hope it helps.

[DotComID]

Dear Support,

I appreciate it, and it fits with what I want to.

Regards,

[DotComID]

Hello again sir, now I need to layout some of 2nd and 3rd sub menu because there is some of menu only stop at 2nd lvl and some has 3rd level

is there any settings for this? i need to set different font format for that. (attachment capture.jpg)

——–

another set of questions, is there possible doing this with current mega menu? (attachment capture2.jpg)
adding widget or images on menu

[Lely]

Hi There,

Thank you for the screenshot.
For the second menu level, please use the following CSS:

.x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a {
    color: red;
    font-size: 20px;
}

For the third level, please use this:

.desktop .x-nav .x-megamenu>.sub-menu a {
    color: green;
    font-size: 20px;
}

Adjust the values accordingly.

Images on megamenu is possible but that would need some customization. Unfortunately, that would be outside the scope of our support. You may wish to consult a web developer to achieve that.

Hope this helps.

[DotComID]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for updating. What you are doing is unusual and will break the expected behavior. We don’t assist on such customization but we have already provided some suggestion as you are interested doing this. It’s not recommended to limit the width of submenu in such way because the content is dynamic and we don’t know the exact length of the menu items neither you know that.

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[DotComID]

This reply has been marked as private.

[Lely]

Hi There,

Please adjust the following CSS to increase submenu width:

.x-megamenu.col-2 .sub-menu {
  max-width: 900px;
}
.x-megamenu.col-4 .sub-menu {
  max-width: 900px;
}

.x-megamenu.col-3 .sub-menu {
  max-width: 900px;
}

Hope this helps.

[Author]

Posts