Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

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


  #1  
Old Sep 30, 2011, 05:10 AM
rbiasiutti
 
34 posts · Mar 2011
Send a message via Skype™ to rbiasiutti
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
  #2  
Old Sep 30, 2011, 05:48 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try using a border of 10 px and make the border color the same as the menu background
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Sep 30, 2011, 07:03 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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
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
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #4  
Old Sep 30, 2011, 08:08 AM
rbiasiutti
 
34 posts · Mar 2011
Send a message via Skype™ to rbiasiutti
Quote:
Originally Posted by lmilesw
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
  #5  
Old Sep 30, 2011, 08:17 AM
rbiasiutti
 
34 posts · Mar 2011
Send a message via Skype™ to rbiasiutti
Quote:
Originally Posted by juggledad
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.
  #6  
Old Sep 30, 2011, 08:33 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Sep 30, 2011, 11:55 AM
rbiasiutti
 
34 posts · Mar 2011
Send a message via Skype™ to rbiasiutti
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...
  #8  
Old Sep 30, 2011, 07:51 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #9  
Old Oct 2, 2011, 12:45 PM
rbiasiutti
 
34 posts · Mar 2011
Send a message via Skype™ to rbiasiutti
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.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to increase the height of Page Menu? onlinebisnes Header configuration & styling 5 Oct 7, 2010 03:18 PM
Page menu bar: first menu item as a image unelma Page & Category Menu Bars 2 Dec 4, 2009 11:52 PM
Can't seem to get padding applied to page menu item tcruiser Page & Category Menu Bars 1 Oct 24, 2009 08:37 PM
Need to Increase Spacing Between Page Names in Menu Bar edvandyke Header configuration & styling 1 Oct 12, 2009 02:16 PM
Left align first item in page bar menu - joaodagraca Page & Category Menu Bars 1 Aug 6, 2009 04:00 AM


All times are GMT -6. The time now is 04:42 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.