Wordpress Themes - WP Forum at BFA - [SOLVED] Page Menu: how do I increase the size of the menu item?

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)

- - [SOLVED] Page Menu: how do I increase the size of the menu item? (http://forum.bytesforall.com/showthread.php?t=15529)

rbiasiutti

Sep 30, 2011 05:10 AM

[SOLVED] Page Menu: how do I increase the size of the menu item?

I tried with some indications found in the other thread but I could not do what I need.
I would like to enter 10 px all around the written (like padding) but when I insert the div expands below.

The menu is a customized WP Menu and I use this css in ATO>Add HTML/CSS Inserts>CSS Inserts :

Code:

ul.rMenu li a:link, 

ul.rMenu li a:visited, 

ul.rMenu li a:hover, 

ul.rMenu li a:active, 

ul.rMenu li {

         padding: 10px;

}

I use atahualpa 3.6.7. ... the link is http://www.rbiasiutti.it/dolphins
Thank you

juggledad

Sep 30, 2011 05:48 AM

try using a border of 10 px and make the border color the same as the menu background

lmilesw

Sep 30, 2011 07:03 AM

the rMenu is an ID so you could also try the following. You don't need the a:link, a:visited, etc.

Code:

ul#rMenu li a

         padding: 10px;

}

Quote:

Originally Posted by rbiasiutti (Post 73093)

Code:

ul.rMenu li a:link, 

ul.rMenu li a:visited, 

ul.rMenu li a:hover, 

ul.rMenu li a:active, 

ul.rMenu li {

         padding: 10px;

}

I use atahualpa 3.6.7. ... the link is http://www.rbiasiutti.it/dolphins
Thank you

rbiasiutti

Sep 30, 2011 08:08 AM

Quote:

Originally Posted by lmilesw (Post 73102)

the rMenu is an ID so you could also try the following. You don't need the a:link, a:visited, etc.

Code:

ul#rMenu li a

         padding: 10px;

}

Nothing changed... the menu aspect is same as original

rbiasiutti

Sep 30, 2011 08:17 AM

Quote:

Originally Posted by juggledad (Post 73096)

try using a border of 10 px and make the border color the same as the menu background

I changed the css in

Code:

ul.rMenu li a:link, 

ul.rMenu li a:visited, 

ul.rMenu li a:hover, 

ul.rMenu li a:active, 

ul.rMenu li {

        border: 10px solid #990000;

}

better... but the size of selectable area of the buttons is remaining the same (1pixel white border delimiting the text) .
I wish that all the button area is selectable and not just text.

lmilesw

Sep 30, 2011 08:33 AM

What I do is use Firebug to find the selectors and then "play" with the CSS. Then when I have it like I want it I cut and paste into ATO>Add HTML/CSS Inserts>CSS Inserts. Learning to use Firebug is VERY helpful. I am not sure why the first code I gave you didn't work but I looked in Firebug, played a bit and came up with the following which should give you padding around all the menu items.

HTML Code:

#rmenu2 li a, #rmenu li a {

    padding: 10px !important;

}

rbiasiutti

Sep 30, 2011 11:55 AM

thanks for the code, now it works.
small problem though: in the buttons with submenus, the padding on the right of the arrows does not work.
now i set, for test, only this code

HTML Code:

#rmenu2 li a, #rmenu li a {

    padding-right: 30px !important;

}

[/quote]

and you see the difference between the two types of buttons... :confused:

lmilesw

Sep 30, 2011 07:51 PM

The arrows are background images. I think the easiest way to get space to the right of the arrows is to create replace the arrows with ones with more space on their right.

rbiasiutti

Oct 2, 2011 12:45 PM

With Firebug, actually, I realized the type of problem and I was already working on it but this weekend I went to relax in the mountains. :)

Now, however, seems to work.

I have followed this steps for a padding of 10 pixels of increment of size of the buttons:

1) I added 10 pixels to the right of the arrows (11 to 21 pixels total) wich is the same dimension of the padding
2) I inserted the code

Code:

#rmenu2 li a, #rmenu li a{

    padding: 10px !important;

}

div#menu1 ul.rMenu-hor li.rMenu-expand a,

div#menu2 ul.rMenu-hor li.rMenu-expand a {

        padding-right: 25px !important;

}

The size of 25 pixels of the padding-right is the result of the sum of 15 pixels with the dimension of the padding wanted (10 pixels).

Thank you for supporting.

All times are GMT -6. The time now is 11:20 PM.