In WordPress, you have the option of editing the templates with the template editor; however, some specific changes can only be done in the code of the site. You can edit the code using the Appearance Editor in the WordPress dashboard. In this article we will explain how to change the size of the font in the menu of the "Twenty Twelve" theme using the Appearance Editor.

Steps to change the font of the menu

  1. Visit your site WordPressFirst you need to find the CSS code that requires editing. You do this by inspecting the code of your site. The following explains how to find the CSS code to edit.

    Visit your website.

    Highlight the menu items. Right click the the highlighted text and select view Selection Source (This is specific to FireFox. Other browsers will have a different way to inspect the code.)


  2. nav-menu css class WordPressFind the class for your navigation Menu. In this case the class we are going to edit it the nav-menuclass. See image to the right.

    Copy the nav-menu class name.


  3. Now you will need to paste the class name in the style.css sheet for your Wordpress. Log into the WordPress Dashboard.
  4. Appearance editor WordPressGo to Appearance and select Editor.

    Select the CSS style.css WordPressYou should by default be taken to the style.css stylesheet. If not, make sure you are on the style.css page by viewing the "Styles" section on the bottom right, and make sure the style.css is blue highlighted like the image to the right.

  5. Add code to your CSS WordPressPaste the class name at the bottom of the style.csspage. Make sure you have a ( . ) dot in front of it. The code should look like the following:
    .nav-menu {}

    You can add attributes to your CSS to change the size, color, and more of the text. In this example, we are changing the font size to 24 pixels (24px). The code looks like the following.

    .nav-menu {font-size:24px;}

    When done adding the CSS, click Update File.

    Important! You may need to Clear your browser cache to see the changes take effect.

    Larger menu font WordPressNow the font on your menu is larger. You can add different properties to change to look of specific areas of your WordPress site with the Appearance Editor of WordPress.

Continued Education in Course 105: Changing the Wordpress Appearance
You are viewing Section 4: How do I use the Appearance editor in WordPress?
Section 3: How do I edit my WordPress theme?
Section 5: Using the Kitchen Sink in WordPress
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
n/a Points
2014-02-28 4:05 am

Hi,

Is this method makes the use of inline style?

If so heard that it effects in the SEO.

 

Thanks

Staff
10,022 Points
2014-02-28 8:42 am
Styles do not necessarily affect the SEO of your site at all unless you are attempting to hide data from the page. This is not an inline style as it is located on another stylesheet.

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

2 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!