Customizing Home Button

[buddhatunes 0]

How can I increase the size of the Home button on my menu bar?

[cmunns 16]

Can you give us a link so I can take a peak at the CSS

[buddhatunes 0]

http://buddhatunes.org--actually, I want to increase the size of all the menu buttons so that they are easily viewable on a phone without having to zoom in.

[bryan-hadaway 3]

In the WordPress Admin, navigate to: Appearance > Editor > Stylesheet (style.css) ( http://buddhatunes.org/wp-admin/theme-editor.php?file=/themes/StationPro/style.css&theme=StationPro&dir=style ) Then on your keyboard press Ctrl+F (Windows) or Cmnd+F (Mac) and search and find: /* MAIN NAVIGATION */ Below this line is the CSS that controls the navigation/menu style. A few lines down find:

font-size: .85em;

in my testing I changed it to:

font-size: 20px;

which made it reasonably large, you may want it smaller, give it try, try different sizes. Don't forget to click "Update File". A very easy way to quickly test changes is to have a separate window open with your websites homepage, that way you can make a change in the admin, save and click over to the other window, hit refresh and check the update, rinse and repeat. Also, if you don't have an iPhone on hand, here's a great tool: http://www.testiphone.com/ Be sure to mark this thread as Resolved if that does the trick. Thanks, Bryan

[buddhatunes 0]

Great thanks. That worked great, but I had a problem with the search box on the iphone afterwards. It took up a second line rather than adjusting left towards the menu buttons. Any suggestions? Also, how about changing the size of the header icons...i noticed this on the style sheet-- /* Header Icons */ .icons {text-align: right;position: absolute;bottom: 22px; right:0px;line-height: 20px;height: 24px;} .icons a {display: block;width: 24px; height: 24px; margin-left: 4px; float: right;text-align: right;} Thanks for your help, Tom

[bryan-hadaway 3]

I'm not seeing the search, or is that the problem, it get's "kicked out"... or did you remove it? I'll need you do add it back if you want me to find a solution real quick. Thanks, Bryan

[buddhatunes 0]

The search button is back up. How do I make it the same size as the other menu buttons? Also, how can I increase the font and box on my "Join" page? Thanks, Tom

[cmunns 16]

Tom, To increase the icon size you'd have to change the images to larger ones. You can't use css because images can't be resized that way.

[bryan-hadaway 3]

Use either of these or both to style search field and button: Input Field:

#searchform #s{font-size:20px}

Search Button:

#searchform #searchsubmit{font-size:20px}

Or Both:

#searchform input{font-size:20px}

Thanks, Bryan