Menu Type Size and Color

[thomasbrennan]

Hello,

I’m fairly new to WordPress. Can you give me advise on changing the size and color of the typeface for the navigation menu text in the Swagger. Any suggestions would be greatly appreciated.

Here’s a link:

http://schedlerbrennan.com/essex5/wordpress/?page_id=25

All the best, Tom

Topic

[thomasbrennan]

Hello again,

I just found the forum posting related to this; #9151. Should have looked first.

Looks like I’ll have to change it in the child theme’s style.css file, correct?

Thanks for a great theme!

[Jason Bobich]

Hello,

Yup, you got it. Any kind of CSS customizations you want to make can go either in your child theme’s style.css or the “Custom CSS” option. But if you’ve got a child theme setup (which you do), I’d definitely put your custom styles in style.css, as this will be a much easier way to keep things organized.

You can also install this plugin for easier editing from your WP admin of of your CSS file:

http://wordpress.org/plugins/wp-editor/‎

Specifically to your original question, you’re really close on what you’re trying to do, but your CSS doesn’t quite override what the theme is doing. You’re doing this:

#access a { ... }

But this is what the theme is currently using for a selector styling the menu items, which is more specific:

#acces li a { ... }

So, that’s what you want to use from your custom CSS to override.

#access li a {
	color: blue;
	font-size: 38px;
	font-family: verdana;
}

In order to find this, you want to use your inspector. For example, using Chrome’s built-in tools, this is how you can quickly find out what selector is currently the most specific being used by the theme that you can override. Over in the right column of the inspector, whatever selector is at the top is what’s the most specific and taking precedence.

Screenshot: http://www.uploadblvd.com/uploads/image_524c61b03dc9c.png

[thomasbrennan]

Thanks much Jason! That worked perfectly. Any tips on how to center that menu?

Thanks again, Tom

[Jason Bobich]

When working with unordered lists, it is sort of difficult to center these items without knowing the width of the containing <ul>. If you google around there are various approaches you can try, but nothing really out there that is simple and easy across all web browsers.

For reference, here’s another theme where I center the list items: http://www.themeblvd.com/demo/arcadian/ — Basically the approach I take is setting the list items to display as “inline-block” and then centering text within the wrapping list.

Here are some of the selectors that you can use, depending on how you want to take a stab at it:

/* Top level unordered list */
#access #primary-menu { ... }

/* Top level list items */
#access #primary-menu > li { ... }

/* Top level buttons within list items */
#access #primary-menu > li > a { ... }

[thomasbrennan]

Thanks again for your help Jason. I’ll give it a shot. Best, Tom

[Author]

Replies