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


Recent Events
  • 31/12/2023 New Year SALE

    We are glad to announce New Year SALE. 25% discount for all our extensions. Use NY24 coupon code. Hurry up the discount is valid till 7 January.

  • 21/11/2023 BLACK FRIDAY 23 is coming

    BIG SALE, 35% discount for all our extensions. Use BF23 coupon code. Hurry up the discount is valid till 27 November.


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 13 Years, 8 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 13 Years, 8 Months ago Karma: 746
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 13 Years, 8 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 13 Years, 8 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! 13 Years, 8 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