Change font size of main menu/slider headings

Hi there!

First of all, a quick suggestion: don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

Once you’re ready to add your own CSS, here’s what I’d recommend using:

.metaslider .caption {
    font-size: 32px;
}

.main-navigation li {
  font-size: 28px;
}

The first line will change the font size of your slider captions, and the second line will change the size of your menu links. You can adjust the numbers until you have something that feel right. ??

Hi Sarah,

Thank you so much, my confusion over custom css and child themes make sense now! Trouble is I’ve already edited a lot of the theme’s css and can’t remember what exactly ooops!

Anyway,

I’ve added the code to the custom css (jetpack) and the slider font is now bigger but the menu font has remained the same size – see felicitymacintosh.com

Any suggestions?

It’s working now Sarah!

Is there anyway to change the spacing between letters on the menu bar so its clearer to read?

This should increase both the font size and the spacing between letters of your menu bar:

.main-navigation #primary-menu li {
    font-size: 28px;
    letter-spacing: 1px;
}

Thank you so much Sarah… I spent at least one complete day trying to figure out how to increase navigation menu font size but could not find any solution that works. Your reply helped.
Again… thanks.

Hi Sarah,

I have tried many times to enter the code and change my font size but it doesn’t seem to be working.

I’m not sure what to do.

Have tried a few different things.

Thanks

David