WordPress › Support » Cannot for the life of me center my navigation menu in twentyeleven

rosiesyarncellar
Member
Posted 4 months ago #

I have been trying to center my navigation menu and it's not working. I have tried the coding mentioned here: http://wordpress.org/support/topic/how-do-i-center-the-navigation-barmenu-on-the-twenty-eleven-theme?replies=9
I put it all in my child theme but nothing. Can anyone help out?
ChristiNi
Member
Posted 4 months ago #

Hi rosiesyarncellar,

Sorry you're having trouble centering your navigation. Could you give us a link to your site? I would like to take a look at your page using the Firebug extension in Firefox. It's a great way to see what CSS is controlling elements on a page.

Thanks!
rosiesyarncellar
Member
Posted 4 months ago #

Absolutely! Sorry about that...
http://www.test.rosiesyarncellar.com/

I'd also like to know how to center the logo in the header if you have any idea on that too.

I've been learning a lot about coding the last few days... firebug has been a great help. Unfortunately there are the last two things I just can't figure out.
ChristiNi
Member
Posted 4 months ago #
Hi rosiesyarncellar,

Thanks for the link, that helped!

I see one thing missing in the CSS from the instructions you linked to for centering your navigation, add this to #access ul:

display: inline-block;

To center your logo, add this to the CSS for #site-title img:
```
display: block;
margin: 0 auto;
```
Hope this helps!
rosiesyarncellar
Member
Posted 4 months ago #

ChristiNi
Thanks so much! Here's what I can see...
For centering the navigation, the CSS in my child theme does have display: inline-block; here it is:
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 0;
padding-left: 0;
display:inline-block;
}

and I know I shouldn't change the original code but when I tried it it still didn't change.

As for the centering of the logo, I didn't explain myself well... I wanted to center it vertically rather than horizontally. Is there a way to do that?

Honestly, thank you so much for your help!
ChristiNi
Member
Posted 4 months ago #

You're welcome rosiesyarncellar! I took a look at your Child Theme style sheet and I noticed you have multiple entries for #access ul. Keep in mind that due to cascading, when you have multiple entries the last entry would take precedence. I would recommend consolidating the entries for #access ul so you can be sure you have the rules you want specified.

Centering vertically is a little trickier, but can be done. You'll probably have to play around with the CSS a bit, but this should get you started in the right direction with that:

http://www.w3.org/Style/Examples/007/center.en.html#vertical

Hope this helps!
rosiesyarncellar
Member
Posted 4 months ago #

Oh my gosh I am such a pain... are #access ul and #access ul ul the same thing? In going though my child theme, I only see one entry for #access ul.

SO many thank yous!

And I'll take a look at the link you forwarded. Thanks!
Sara
ChristiNi
Member
Posted 4 months ago #

Hello again Sara,

You're welcome! Glad to help. Yes, I think #access ul ul (on line 155) is most likely a typo. Here's what I noticed in your style sheet:

On line 51 this referes to both the unordered list and links in the unordered list:

#access ul ul a {

On line 134, this referes to the unordered list:

#access ul {

Line 155 looks like it is most likely a typo:

#access ul ul {

There's other references to #access that may have some conflicting rules as well:

Line 41: #access a

Line 63: #access

Line 77: #access

Line 144: #access div

Hope this helps!
rosiesyarncellar
Member
Posted 4 months ago #

I GOT IT! Yahoo! Thanks again, SO MUCH for your time and patience. I think I am going to have someone code the vertical centering part. I think that's way beyond my skill level.

Thanks so much!
ChristiNi
Member
Posted 4 months ago #

Glad to to hear that Sara,

One more thing I want to point out, and this appears to be the source of the extra space under the logo:

<h2 id="site-description"></h2>

Probably the easiest way to remove this is to add the following to the #site-description declarations in your Child Theme's style sheet:

display:none;

Good luck with your site, you're making great progress!
rosiesyarncellar
Member
Posted 4 months ago #

That's great ChristiNi! You are so helpful!
Any chance you can help me with the content font? It's currently set to Helvetica and I'd like to change it but it seems no matter where I make the change in the CSS it doesn't take.

Sara
rosiesyarncellar
Member
Posted 4 months ago #

Ok, one last thing, I promise! Is there anyway to make the navigation bar narrower/shorter?

Then I will leave you alone!
ChristiNi
Member
Posted 4 months ago #
Thanks Sara!

Took a look at the font (still using Firebug extension). Depending on how much of the font you want to change:

If you just want to change the content (not the footer or sidebars) add font styling to this in your style sheet:
```
.entry-content, .entry-summary {
    padding: 1.625em 0 0;
}
```
If you want to change the font for everything, edit this accordingly:
```
body, input, textarea
{
	color:#373737;
	font: 300 15px/1.625 "Helvetica Neue",Helvetica,Arial,sans-serif;
}
```
Hope this helps too!
ChristiNi
Member
Posted 4 months ago #

Hello again Sara,

Sorry, posted my last response before I saw your question about the navigation bar. I would recommend using Firebug to pinpoint the different CSS that controls those elements and just test out different settings until you find the right combination. I think you'll want to control the height of the #access div and the height of the .current-menu-item.

Remember you can always make a back up of your style sheet before making changes so if you need to you can restore it.

Good luck!

Reply

You must log in to post.

WordPress.org

Forums

[resolved] Cannot for the life of me center my navigation menu in twentyeleven (14 posts)

Reply

About this Topic

Tags

Code is Poetry