Docs

[marco g]

Hi,
I’m using the X theme for my website
In the top MENU, while mouseover the menu options an event occurs, which has 3 UI issues:
https://s31.postimg.org/4zyu6ve6z/X_MENU_issues.png

1 – The button margin is too big and over the menu box.
2 – The button has a round shape, but should be rectangular.
3 – The dropdown menu box is too large and is not aligned with the menu option box.

Please help me with these issues. Thanks!

[marco g]

This reply has been marked as private.

[Christopher]

Hi there,

Please increase ‘Navbar Top Height’ to 42px and ‘Navbar Top Link Alignment’ to 16px under Customize -> Header.

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

.x-navbar .desktop .x-nav>li>a>span {
    border: 1px solid transparent;
    padding: 0.875em 1.25em;
    border-radius: 0;
}
.x-navbar .desktop .x-nav > li ul {
    top: 62px;
}
desktop .sub-menu a {
    padding: 0.3em 1.6em;
}

Hope it helps.

[marco g]

Hey, I played a bit with sizes and it did help. Still the drop-down menu is still too large 🙁
Is there a way to change it’s size?

https://s32.postimg.org/d3n0kibrp/X_dropdown_MENU_issues.png

https://s31.postimg.org/7t2pfsuln/X_dropdown_MENU_issues_1.png

Thanks!

[Lely]

Hello Marco,

We can adjust the minimum width set for submenu. Please add this CSS:

.desktop .sub-menu {
    min-width: 200px; /*Adjust this default min width to your preferred size*/
}

Hope this helps.

[marco g]

Thanks for help, works much better now!
Have a nice day!

[Joao]

Glad to hear it,

Joao

[Author]

Posts