Home News Contact Us Forum About Us Demos Products F.A.Q.
Shopping Cart
You currently have 0 items in your cart.


Recent Events
  • 05/09/2017 BIG Autumn SALE

    Use AUTUMN17 coupon code to buy our WordPress or Joomla! extensions with 25% discount. Hurry up! The offer is valid till 11 September.

  • 14/04/2017 Happy Easter

    Wish a Happy Easter and give 30% discount for all our WordPress and Joomla! extensions. Use EASTER17 coupon code. The offer is valid till 17 April.


2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft. 2CheckOut




Follow us on twitter



Welcome, Guest
Please Login or Register.    Lost Password?

Add margin and border on ARI Ext Menu on mobile
(1 viewing) (1) Guest
Go to bottomPage: 1
TOPIC: Add margin and border on ARI Ext Menu on mobile
#58165
Add margin and border on ARI Ext Menu on mobile 1 Year, 2 Months ago Karma: 0
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 :
Code:

.ux-menu-container {
text-align:center;
line-height: 10px;
vertical-align: middle;
}
.ux-menu {
display:inline-block;
}

UL.ux-menu-sub {
z-index: 20001 !important;
margin-top: -1px;
}

Last Edit: 2016/07/28 10:05 By Keichi.
The administrator has disabled public write access.
 
#58166
Re: Add margin and border on ARI Ext Menu on mobile 1 Year, 2 Months ago Karma: 4
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
Last Edit: 2016/07/28 12:00 By Mazfer.
The administrator has disabled public write access.
Mazfer
- Long time CSS/HTML coder
- mazindesigns.com
 
#58167
Re: Add margin and border on ARI Ext Menu on mobile 1 Year, 2 Months ago Karma: 0
Thanks Mazfer!

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



I used :
Code:

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

.ux-menu li:first-child {
border-left: 1px solid #e3dad1;
} /*adds left-border on the first child in this row*/

.ux-menu li {
border: 1px solid #e3dad1;
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*/

Last Edit: 2016/07/28 12:09 By Keichi.
The administrator has disabled public write access.
 
#58168
Re: Add margin and border on ARI Ext Menu on mobile 1 Year, 2 Months ago Karma: 4
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*/
The administrator has disabled public write access.
Mazfer
- Long time CSS/HTML coder
- mazindesigns.com
 
#58169
Re: Add margin and border on ARI Ext Menu on mobile 1 Year, 2 Months ago Karma: 0
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 ?
Last Edit: 2016/07/28 12:40 By Keichi.
The administrator has disabled public write access.
 
#58171
Re: Add margin and border on ARI Ext Menu on mobile 1 Year, 2 Months ago Karma: 4
.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*/
}
The administrator has disabled public write access.
Mazfer
- Long time CSS/HTML coder
- mazindesigns.com
 
Go to topPage: 1