Why specifically changing the font size of the menu tabs? Because I couldn’t find this anywhere myself. Although this was a while back and there may be a dozen blogs just like mine (I haven’t checked) I figured if I help anyone out, it’s worth it. That being said…
I never liked all the initial fluff and stuff when I read blogs, so we’re going to get right into it.
Less time to read? Here's a brief overview:
- WordPress offers easy to use customization for all HTML/CSS edits.
- To change the menu font size, use this class selector: " .menu-item a "
- If you need other styling for the menu tabs, there are plenty of options.
1. WordPress Customization
Customizing with CSS in WordPress is actually really simple. No matter what Theme you’re using, WordPress makes it really easy to inject custom CSS. The CSS Customization tab can be found by hovering on the “appearance” tab in the admin area, and selecting the option “customize”:
Once you select “Customize”, you will be brought to the customize screen which looks like a frontend editing screen. On the left hand panel you’ll notice some options, these options vary by Theme, but all theme’s across the board will always have an “Additional CSS” tab, and that’s the one you need to select:
2. CSS for Menu Header Font Size
Now, to increase the font size. Once you are in the customizer, you simply need to add this piece of code, and hit the “Publish” button:
.menu-item a {
font-size: 20px;
}
If “20px” is too small in the example above, you can increase it to any size you like: “font-size: 36px;”. Same if it is too big, decrease by lessening the pixel size: “font-size: 16px;”
There is a chance that you may need to add the “!Important” tag to the end of the statement. This would be necessary if there already is some inline CSS telling the menu to have a certain font-size already. If there is such a piece of code, then you need to override that with the one above, and we do this in CSS by adding the “!important” tag:
.menu-item a {
font-size: 20px !important;
}
You first want to try it without “!important”, since it’s never good coding practice to override already injected inline CSS. That being said, it was created for a reason, and if you can’t figure out where the font-size is coming from and just need to have it changed, go for it.
3. Other Styling Techniques
Once you got your font-size working for you, you may be wondering if there’s any other styling tricks you can do by targeting the class above. The answer is YES!
Say you want to change the text color, and not just the text-size. Simple! Just add this line, right after the previous:
.menu-item a {
font-size: 20px;
color: black !important;
}
I added the !important tag straight in, but the same rule applies as above. First test it without. See below how I needed to add the !important tag, and once I did, the text color changed to black:
You don’t need to use the words “black” or “blue”, you can also put in hex colors for example:
.menu-item a {
font-size: 20px;
color: #000000 !important;
}
This would give the same black color as before. Other styling ideas can be implemented, such as underline or making the text bold:
.menu-item a {
font-size: 20px;
color: black !important;
text-decoration: underline;
font-weight: bold;
}
Once you start playing around with CSS tricks, you notice how almost anything can be styled with a little bit of CSS.
If you’re looking for the easy route, I highly recommend Elementor Page Builder. They have a “style” tab where you literally have every styling option under the sun. The company goes above and beyond the rest of the page builders out there, and you can take it from me- I tried most of them. They offer a free version if you’d like to try it out, but I honestly recommend going straight to premium. It will save you SO much time, and you’ll wonder how you ever created websites without Elementor. BTW, this website itself was created with Elementor.
I hope this helps blog gave you some good tips, and if you have any questions or would like some other insight, feel free to leave a comment below and I’ll try to reply asap.