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?

CSS for 1st & last main menu items
(1 viewing) (1) Guest
Go to bottomPage: 1
TOPIC: CSS for 1st & last main menu items
#5342
CSS for 1st & last main menu items 7 Years, 3 Months ago Karma: 0
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!
The administrator has disabled public write access.
 
#5351
Re:CSS for 1st & last main menu items 7 Years, 3 Months ago Karma: 667
Hello,

Try to use the following CSS rules:

Code:


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

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



Regards,
ARI Soft
The administrator has disabled public write access.
 
#5370
Re:CSS for 1st & last main menu items 7 Years, 3 Months ago Karma: 0
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?
The administrator has disabled public write access.
 
#5371
Re:CSS for 1st & last main menu items 7 Years, 3 Months ago Karma: 0
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?
File Attachment:
File Name: menu-fb5184117eacf1d772558399ce37ebb9.zip
File Size: 1058
The administrator has disabled public write access.
 
#5372
GOT IT! 7 Years, 3 Months ago Karma: 0
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
The administrator has disabled public write access.
 
Go to topPage: 1