Centering menu, changing text size in Yoko

jmhanlon8 · Member · Jun 29, 2013 at 3:01 pm
Copy link

Add topic to favorites
Hi, I’d like to be able to center the menu that’s above my header image and make the text larger or have a background color. I know this should be a fairly simple fix, but the code I’ve seen posted here to do this in other themes isn’t working for my Yoko theme.

I’m new to CSS so my method has been to “view source” of other Yoko blogs, but I haven’t come across any that have a centered menu.

Any code/hints would be appreciated!

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Jul 1, 2013 at 10:47 pm
Copy link
the code I’ve seen posted here to do this in other themes isn’t working for my Yoko theme

That’s normal. CSS will be different for each theme.

I’d like to be able to center the menu that’s above my header image

You can center the main menu on the Yoko theme like this:
```
#branding #mainnav {
	text-align: center;
	width: 100%;
	max-width: 100%;
}

#mainnav ul {
	display: inline-block;
}
```
make the text larger

To change the text size and color, first try the options in the Appearance → Themes → Customize → Colors panel.

I see you’ve also already figured out how to adjust the main menu font size using CSS like this:
```
#branding #mainnav ul li a {
	font-size:1em;
}
```
or have a background color

To change the main menu background color, add something like this:

background: #eee;

To the “#mainnav ul” block from above. Adjust the color code as needed.

The blog looks great!
jmhanlon8 · Member · Jul 11, 2013 at 4:19 pm
Copy link
Thank you! It all worked perfectly.

No items found.