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?

Centering menu items with equal padding
(1 viewing) (1) Guest
Go to bottomPage: 123
TOPIC: Centering menu items with equal padding
#5245
Centering menu items with equal padding 7 Years, 3 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!
The administrator has disabled public write access.
 
#5249
Re:Centering menu items with equal padding 7 Years, 3 Months ago Karma: 667
Hello,

Provide link to page, please, where we can see the menu on your site that we can help you.

Regards,
ARI Soft
The administrator has disabled public write access.
 
#5256
Re:Centering menu items with equal padding 7 Years, 3 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!
The administrator has disabled public write access.
 
#5273
Re:Centering menu items with equal padding 7 Years, 3 Months ago Karma: 667
Hello,

Sorry, but your site doesn't contain 'ARI YUI Menu' module.

Regards,
ARI Soft
The administrator has disabled public write access.
 
#5278
Re:Centering menu items with equal padding 7 Years, 3 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;
}

The administrator has disabled public write access.
 
#5282
Re:Centering menu items with equal padding 7 Years, 3 Months ago Karma: 667
We can help you, if we see the menu on your site.

Regards,
ARI Soft
The administrator has disabled public write access.
 
Go to topPage: 123