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?

Setting Individual Width for Each Menu Item/LI
(1 viewing) (1) Guest
Go to bottomPage: 12
TOPIC: Setting Individual Width for Each Menu Item/LI
#5819
Setting Individual Width for Each Menu Item/LI 13 Years, 8 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.
The administrator has disabled public write access.
 
#5820
Re: Setting Individual Width for Each Menu Item/LI 13 Years, 8 Months ago Karma: 0
Also, where can I adjust the line-height of the menu bar to fill the menu container?
The administrator has disabled public write access.
 
#5824
Re: Setting Individual Width for Each Menu Item/LI 13 Years, 8 Months ago Karma: 746
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
The administrator has disabled public write access.
 
#5846
Re: Setting Individual Width for Each Menu Item/LI 13 Years, 8 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?
The administrator has disabled public write access.
 
#5849
Re: Setting Individual Width for Each Menu Item/LI 13 Years, 8 Months ago Karma: 746
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
The administrator has disabled public write access.
 
#5854
Re: Setting Individual Width for Each Menu Item/LI 13 Years, 8 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!
The administrator has disabled public write access.
 
Go to topPage: 12