There does not appear to be support for menu separators so I am trying use simple css borders between menu items. I am trying to remove the outer-most borders for the first and last main menu items without affecting the sub menu items. In the attachment, the red arrows show the two borders I'm trying to eliminate while keeping the rest.

I've tried everything I can think of but I cant' find the correct selectors / CSS identifiers to style the menu items I want. I thought it would look something like this:

.ux-menu-item-main.ux-menu-link-first {
border-left-style :none;
}

.ux-menu-item-main.ux-menu-link-last {
border-right-style :none;
}

But I need to know the exact syntax of the the two (in blue). Can you help?

Thanks - love this product!

Hello,

Try to use the following CSS rules:



Regards,
ARI Soft

Thanks for the quick response!

I applied this CSS but found two issues:
1) It is being overridden by the border style I've put in .ux-menu-item-main:

.ux-menu-item-main {
border-left-color :#ffffff;
border-left-style :solid;
border-left-width :1px;
border-right-color :#ffffff;
border-right-style :solid;
border-right-width :1px;
}

2) It's affecting the sub menu items (see attached)

Perhaps I need more (and more granular) style tags to target the appropriate menu elements. I am attaching the css file, perhaps you can take a quick looks to see where my style tags are in conflict?

Thanks for the quick response!

I applied this CSS but found two issues:
1) It is being overridden by the border style I've put in .ux-menu-item-main:

.ux-menu-item-main {
border-left-color :#ffffff;
border-left-style :solid;
border-left-width :1px;
border-right-color :#ffffff;
border-right-style :solid;
border-right-width :1px;
}

2) It's affecting the sub menu items (see attached)

Perhaps I need more (and more granular) style tags to target the appropriate menu elements. I am attaching the css file, perhaps you can take a quick look to see where my style tags may be in conflict?

Solved it! I changed it to this:

.ux-menu-item-main a {
border-left-color :#ffffff;
border-left-style :solid;
border-left-width :1px;
border-right-color :#ffffff;
border-right-style :solid;
border-right-width :1px;
}

.ux-menu-item-main a.ux-menu-link-first {
border-left-style: none;
}

.ux-menu-item-main a.ux-menu-link-last {
border-right-style: none;
}

Cheers