ARI Soft - Centering menu items with equal padding

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

Centering menu items with equal padding

(1 viewing) (1) Guest

Page: 12 3

TOPIC: Centering menu items with equal padding

Forum Tools

#5245

Centering menu items with equal padding 13 Years, 9 Months ago	Karma: 0
I've read through the forums and tried all different modifications to get this to work -- thanks for any help you can provide. I am trying to get a simple horizontal menu where the text label for each button is centered, and the space in between each is even. What do I need to include in the CSS for that to happen? Thanks!

BBWeb

The administrator has disabled public write access.

#5249

Re:Centering menu items with equal padding 13 Years, 9 Months ago	Karma: 747
Hello, Provide link to page, please, where we can see the menu on your site that we can help you. Regards, ARI Soft

admin

The administrator has disabled public write access.

#5256

Re:Centering menu items with equal padding 13 Years, 9 Months ago

Karma: 0

It's not ready to go live yet (obviously) but the site is already live, so I put it up temporarily so you could check it out. Shortened link here: tinyurl.com/32dr7v9

I'd also like to know:
1. How to remove the lines in between each option if desired.
2. How to make the rollover highlights the same height as the buttons.
3. How to get the bar itself to be the same width as the buttons (the bar nav bar needs to be a specific width, but the individual button widths + borders is not going to total that number, so I keep seeing a little bit off to the right.
4. How to get the hand cursor like the other buttons on the site.

Thanks!

BBWeb

The administrator has disabled public write access.

#5273

Re:Centering menu items with equal padding 13 Years, 9 Months ago	Karma: 747
Hello, Sorry, but your site doesn't contain 'ARI YUI Menu' module. Regards, ARI Soft

admin

The administrator has disabled public write access.

#5278

Re:Centering menu items with equal padding 13 Years, 9 Months ago Karma: 0

I removed it because it wasn't working.

Here's what I have now

Code:

.yui-skin-sam .yuimenubar .bd

{

line-height: inherit;



}



.top_menu .yui-skin-sam .yuimenubar UL

{

padding: 0;



}



.top_menu .yui-skin-sam .yuimenubar UL LI

{

padding: 0;

margin:0;

}



.top_menu .yui-skin-sam .yuimenubar .yuimenu UL LI

{

float: none;

}



BODY #{$id}.yui-skin-sam .yuimenubar,

BODY #{$id}.yui-skin-sam .yuimenubaritem-selected,

BODY #{$id}.yui-skin-sam UL LI.yuimenuitem-selected,

BODY #{$id}.yui-skin-sam .yuimenu .bd

{

background-color: #EE7F80;

background-image: none;

border-width:0;

}





BODY #{$id}.yui-skin-sam ul li a.yuimenubaritemlabel,

BODY #{$id}.yui-skin-sam ul li a.yuimenubaritemlabel:link,

BODY #{$id}.yui-skin-sam ul li a.yuimenubaritemlabel:visited,

BODY #{$id}.yui-skin-sam ul li a.yuimenuitemlabel,

BODY #{$id}.yui-skin-sam ul li a.yuimenuitemlabel:link,

BODY #{$id}.yui-skin-sam ul li a.yuimenuitemlabel:visited

{

color: #000;

}



BODY #{$id}.yui-skin-sam ul li a.yuimenubaritemlabel:hover,

BODY #{$id}.yui-skin-sam ul li a.yuimenuitemlabel:hover

{

color: #000;

background-color: #b5d580;

}



.top_menu .yui-skin-sam .yuimenubarnav .yuimenubaritemlabel-hassubmenu

{

background-image: none;

}



.top_menu .yui-skin-sam .yuimenubarnav .yuimenubaritemlabel

{

width:50px;

text-align:center;

}



.top_menu .yui-skin-sam .yuimenubarnav .yuimenubaritem

{

border-width: 0; /* was 1 */

}



top_menu .yui-skin-sam .yuimenubarnav .yuimenubaritemlabel:hover,

.top_menu .yui-skin-sam .yuimenubarnav .yuimenubaritemlabel-selected

{

border-width: 0; /* was 1 */

margin-left: 0px;

}





.yuimenubar .bd UL LI a

{

 width: 48.6px; /* specify necessary width */

}



.yuimenubar .bd UL LI .bd UL LI a

{

 width: auto;

 text-align: center; /* added */

}



body #{$id}.yui-skin-sam .yuimenubar

{

  border-style: none;

}



body #{$id}.yui-skin-sam .yuimenubar ul li a.yuimenubaritemlabel

{

  border-style: none;

}





#{$id}.yui-skin-sam .yuimenubar ul li a.yuimenubaritemlabel,

#{$id}.yui-skin-sam .yuimenubar ul li a.yuimenubaritemlabel:link,

#{$id}.yui-skin-sam .yuimenubar ul li a.yuimenubaritemlabel:visited,

#{$id}.yui-skin-sam .yuimenubar ul li a.yuimenubaritemlabel:hover

{

  padding-left: 15px;

  padding-right: 15px;

}

BBWeb

The administrator has disabled public write access.

#5282

Re:Centering menu items with equal padding 13 Years, 9 Months ago	Karma: 747
We can help you, if we see the menu on your site. Regards, ARI Soft

admin

The administrator has disabled public write access.

Page: 12 3

Useful Links