Adjusting menu-bar size/font, etc.

Using the Firefox browser with the Firebug addon is invaluable in working with the CSS that controls your site’s appearance.

There are several CSS rules that affect the menu. Here are the properties for just one selector (.main-navigation li a).

You should create a Child theme or use a CSS plugin such as Simple Custom CSS to make your changes. If you do not, all of your changes will be lost if you update your theme.

You can test this by adding it to the end of your theme’s style.css, but to make it permanent, you should do as suggested above:

.main-navigation li a {
    border-bottom: 0px none;
    color: #6A6A6A;
    line-height: 3.69231;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 15px;  /* added as example */
    font-weight: bold;  /* added as example */
}

Hi there! Thanks! I know I asked for instructions how to make changes so that if/when I updated the changes would remain, but I am finding the principle behind child themes extremely tricky to grasp! I think I’d need to see it actually physically demonstrated, so will probably have a look at Youtube!

Meantime, how can I make some temporary changes to increase the size/font/colour of my menus without creating child theme?

Thanks again!
FP

Meantime, how can I make some temporary changes to increase the size/font/colour of my menus without creating child theme?

Answered above.

Cheers, but I’m not sure I’m placing the code in the right place! I put it right at the foot of my style.css and clicked “update” but nothing appeared to happen, so I made the font 30x instead and still nothing looked any different. Where exactly do I need to place the code? (It’s back to absolute basics with me, apologies!) FP ??

The code goes at the end of your Twenty Twelve style.css file. I do not see the code there now. Please place it there and leave it so I can see.

Right-o, that’s me placed it in ??
Can you see it?

Looks like you have accidentally deleted a closing brace ‘}’ that was at the end of the original file. Try changing this:

.main-navigation li a {

to this:

}
.main-navigation li a {

Okay, done… but I still don’t see a difference. I’ve changed the font size to 30x but it’s not really made any differences.

You only replaced a previous brace. Add another one. There should be two braces just before the added code.

Hi, have done this but do I need to put a space in between them or can I just add it as }}.main-navigation… etc?

It works the way it is, but for readability, the end of the file should look like this:

margin-left: 3.57142857rem;
	}
}
.main-navigation li a {
    border-bottom: 0px none;
    color: #6A6A6A;
    line-height: 3.69231;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 30px;
    font-weight: bold;
}

EDIT: The WP editor removes spaces on the first line of embedded code. The margin-left: 3.57142857rem; line should be indented to match the line just preceding it.

Hi, I think I’ve copied it exactly as you described, but for some reason the changes aren’t applying. Just for the avoidance of doubt, it’s the menu bar with Home, About Us, Prices, Contact, etc. that I want to change. I have absolutely no idea why it’s not working ??

It is working. I see the changes. If you are using a caching plugin, clear the cache. Also clear your browser’s cache.

Yikes! It did work ?? Cleared the cache like you said. Brilliant! Thanks ever so much; it looked a bit small and I wanted it to be more eye-catching! Certainly is now! Will make it a bit smaller…! Ta, FP