ARI Soft - Setting Individual Width for Each Menu Item/LI

Home

News

Forum

About Us

Demos

Products

F.A.Q.

Featured Demos

ARI Smart Content demo

ARI Quiz demo

WordPress Quiz plugin

WordPress Lightbox plugin

e-mail: info@ari-soft.com

Shopping Cart

You currently have 0 items in your cart.

Show 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.

more...
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.

more...

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

Welcome, Guest
Please Login or Register. Lost Password?

ARI Soft Forum

Joomla components

ARI YUI Menu

Setting Individual Width for Each Menu Item/LI

(1 viewing) (1) Guest

Page: 12

TOPIC: Setting Individual Width for Each Menu Item/LI

Forum Tools

#5819

Setting Individual Width for Each Menu Item/LI 14 Years, 4 Months ago	Karma: 0
Dear Sir, I would like to set a different width for each individual menu item/LI in order to fill the menu bar - otherwise the space to the right appears empty. Basically I want the width of each top menu item to be larger so I can fill the space of the menu bar but I want each width to be different. Where/how I can make these changes within the CSS? My site is here.

craad

The administrator has disabled public write access.

#5820

Re: Setting Individual Width for Each Menu Item/LI 14 Years, 4 Months ago	Karma: 0
Also, where can I adjust the line-height of the menu bar to fill the menu container?

craad

The administrator has disabled public write access.

#5824

Re: Setting Individual Width for Each Menu Item/LI 14 Years, 4 Months ago Karma: 760

Hello,

Download and upgrade the module, please. New version add the following CSS class to menu items: yui-menu-item<menu_item_id>

Where <menu_item_id> is menu item id. Use the following CSS rule that change line height of the container:

Code:



body .module #ariyui52.yui-skin-sam ul li a.yuimenubaritemlabel

{

  line-height: 34px;

}

Regards,
ARI Soft

admin

The administrator has disabled public write access.

#5846

Re: Setting Individual Width for Each Menu Item/LI 14 Years, 4 Months ago	Karma: 0
Thank you. Could you be more specific about where exactly to add the class yui-menu-item<menu_item_id> to menu items? I will need to add a separate class to each menu item and then specify the width for each individual menu item within CSS. What would the code look like?

craad

The administrator has disabled public write access.

#5849

Re: Setting Individual Width for Each Menu Item/LI 14 Years, 4 Months ago Karma: 760

The following CSS rule can be used:

Code:



.yuimenubar .yui-menu-item<MENU_ITEM_ID>

{

  width: 90px;

}

Where <MENU_ITEM_ID> is menu item id which can be found in Joomla! menu manager. For example, if you want to set 100px width for 'home' menu item on your site, use the following CSS rule:

Code:



.yuimenubar .yui-menu-item53

{

  width: 100px;

}

Regards,
ARI Soft

admin

The administrator has disabled public write access.

#5854

Re: Setting Individual Width for Each Menu Item/LI 14 Years, 4 Months ago	Karma: 0
Thank you! I also want to say this is a great module and your other software applications are phenomenal as well. Keep up the great work!

craad

The administrator has disabled public write access.

Page: 12

Useful Links