Hi @awatsondesigns,
You could achieve what you’re after using some custom CSS.
To add custom CSS, firstly set up a child theme or activate a custom CSS plugin. If you have Jetpack then you can enable its custom CSS module.
Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme in order to reduce the font size of the text in your menu:
@media screen and (min-width: 1281px) {
.main-navigation {
font-size: 0.78em;
}
}
Next, you can use the following to slightly reduce the font size and widen the title area so that everything fits on one line:
@media screen and (min-width: 35em) {
.has-site-logo .site-title {
max-width: 80%;
}
}
.site-title {
font-size: 1.5em;
}
Let me know how you get on with that or if any extra questions come up.
Hi Siobhan,
Thanks so much for your reply! I’m still too nervous to mess with any custom CSS adjustments, so I ended up removing my logo and one of my pages to get the header to look the way I want it to. I really appreciate your help though and may come back to this once I’m more comfortable with custom CSS.
Andrea
I’m glad you found a workaround to achieve what you were after, Andrea!
It’s worth noting that, if you have Jetpack enabled, then you can add custom CSS via Appearance > Edit CSS. Any CSS added to the editor there can be quickly removed if it causes any trouble.
If you do decide to give CSS a go, then feel free to start another thread on these forums. We’ll be happy to help guide you.
