Hello,

I use ARI Ext Menu on my website (archersdevillebon.fr). It is really great.
But, when i am on a smartphone, the menu looks like that :


It is not really "nice".
Is there a way to :
- add missing borders on the right ?
- add some margin between rows ?
- center the menu ?

Thanks !

K.

PS :
Looking to this forum, i already use these CSS classes to center the menu on desktop page and correct the display of submenu on mobile :

Looks like the link-elements in the parent menu only prints top, left and bottom borders resulting in the right borders not showing.

Technically you could do this:

.ux-menu li a {border: 0 none !important;} /*forcibly remove borders from A (link) elements */
.ux-menu li:first-child {border-left: 1px solid #your-color-in-hex-here !important;} /*adds left-border on the first child in this row*/
.ux-menu li {border: 1px solid #your-color-in-hex-here; border-left: 0 none !important;} /*adds visible borders to all 4 borders, but forcibly removes the left border on all children but the first child*/


PS.
Change the color hex # to the color in hex-decimal you want, else it will give a css error

Thanks Mazfer!

Now it is the left border which disappear... ^^'



I used :

remove the code selecting the first-child as well as border-left: 0 none !important; from the .ux-menu li code, so it looks like this

.ux-menu li a {
border: 0 none !important;
} /*forcibly remove borders from A (link) elements */

.ux-menu li {
border: 1px solid #e3dad1;
} /*adds visible borders to all 4 borders*/

Thanks Mazfer !
But now, i have two pixels on the right/left, and 1 on top/bottom. Is there a way to collapse it ?


Do you know if it is possible to center the menu / add a bottom margin to make the display nicer ?

.ux-menu li {margin-left: -1px; margin-top: -1px;}

Doing so will move the li elements negative 1px left and to the top, and thus the borders left and top will overlap with right and bottom. It is probably not the best solution, but it works.

And if you want to correct the left-side negative margin on the menu, so it aligns with the left-side of the rest of the page..
.ux-menu {margin-left: 1px;}


As for your other question.
Currently the .ux-menu element is spanning 100% over the template (at least on mobiles) this results in the menu ending up showing like it currently is. If you really want to center it you have to add a set width to this element, as such

.ux-menu {
width: 200px; /*this can also be set in %*/
margin-bottom: 20px; /*adds a margin of 20px to the bottom of this element*/
}


Or force it for mobiles only:

@media screen and (max-width: 360px) {
.ux-menu {width: 90%;} /*this can also be in px*/
}