[Theme: Mon Cahier] Reducing Menu and Post Text Size

Hi there,

The easiest way to change the font size is to make a child theme and then change the font-sizes in the style.css of the css. Yesterday, I wrote a blog post explaining how to make a child theme and change the font family.
https://www.bluelimemedia.com/2012/09/22/mon-cahier-child-theme/

For you, your stylesheet would have the following:

body,
button,
input,
select,
textarea {
	font-size: 14px;
	font-size: 1.4rem;
}

.main-navigation a {
	font-size: 16px;
	font-size:1.6rem;
}

That would reduce the fonts by 2px for both the body and the navigation.

If you have jetpack installed, there’s also an option to have custom CSS. You could also try that, but I that feature is pretty new and I haven’t had a chance to play with it yet.

That worked perfectly to change the menu font size Christine. However, the child page links visible as drop downs are still the same size text as they were before. Oddly enough, I can only see drop down child pages in my child theme, not in the original. Any thoughts about what code might need to be changed in a child theme to change that font size? My site is https://www.thenorthernist.com

Hi Rachel,

I looked at your site and I think that the subnav if indeed 16px, but you’re right it looks big.

Try adding the following to your child style.css

.main-navigation ul ul a {
       font-size:12px
       font-size: 1.2rem;
}

This will make the font much smaller. I find it easier to go for really small, just to make sure that it’s really working and then I adjust to my liking.

Hi Christine,

I’ve tried adding your suggested code various ways in the child style.css and I’m not seeing any change. I cleared my cache just in case. Any other thoughts? Thanks.

You’re missing a closing } after the body:

body,
button,
input,
select,
textarea {
	font-size: 14px;
	font-size: 1.4rem;

.main-navigation ul ul a {
	font-size: 12px;
	font-size: 1.2rem;
}

Change it to :

body,
button,
input,
select,
textarea {
	font-size: 14px;
	font-size: 1.4rem;
}

.main-navigation ul ul a {
	font-size: 12px;
	font-size: 1.2rem;
}

Brilliant, thanks very much.