Jump to content
Sign in to follow this  
tcantrell

Capitalize Home and center top page buttons?

Recommended Posts

tcantrell

Is there any way capitalize the "Home" button in the top navigation? I would also like to center all of the buttons if possible.

Share this post


Link to post
Share on other sites
bryan-hadaway

Normally, you would add this to: Theme Options > Custom Code > Custom CSS `#nav ul li a{text-transform:uppercase}` But, if you only want "Home" to become "HOME" then I'll need a link to your page to single out just "Home". Thanks, Bryan

Share this post


Link to post
Share on other sites
tcantrell

Thank you... That worked perfectly actually. I already had the other page buttons capitalized but for some reason "Home" wanted to only have the "H" capitalized. Still curious if it's possible to center the main navigation in Station Pro? Rather than having it aligned to the left.

Share this post


Link to post
Share on other sites
cmunns

Of course it's possible. The easiest way to do it is probably just assign more padding until it looks right `#nav {padding-left:180px;}` Not sure how many items you have, but thats a quick and dirty way of centering.

Share this post


Link to post
Share on other sites
tcantrell

It worked...Kinda. But if I get it centered in Safari it looks too far left in Firefox and vice versa. Tried adding a right padding but can't seem to get it centered in both browsers. I tried text-align also but that doesn't work either.

Share this post


Link to post
Share on other sites
tcantrell

I've been messing with it a little more. At the moment I have: #nav {padding-left:135px;} #nav {padding-right:125px;} It's centered in Firefox but in Safari it's just a little further to the left. Haven't even tried IE yet, not looking forward to that one.

Share this post


Link to post
Share on other sites
catrina

Hi, Have you tried using margin adjustments to make them centered? If not, try this:

#nav {position: relative; margin: 0px auto;}

(Of course, remove the padding-left/padding-right CSS you already added)


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
tcantrell

I've tried margin, that may work but when using margin it covers up the little bit of a gradient that is behind the buttons. Padding on the other hand doesn't cover it up, it just pushes the buttons over.

Share this post


Link to post
Share on other sites
catrina

How about adding

background-color: none;

to the CSS tag to see if the gradient gets uncovered?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
tcantrell

Doesn't seem to work. Margin changes the actual width of the entire menu. Padding only pushes the buttons but leaves the background unaffected. Thanks for the suggestions though. I may just have to center it for Firefox and leave Safari a little off. It's only about 10-15 pixels so it's not real noticeable.

Share this post


Link to post
Share on other sites
cmunns

The idea of `margin:0 auto;` is good because that is normally how you center things but it only works when it has a width as a reference from which to center.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×