im trying to slightly increase the font size of the header/nav bar text font size in the casper theme. I am using inspect-element and can get the font to change temporarily via modifying the .site-nav font size. However, it says its inherited from nav, and nav lists font as
font: inherited
size: inherited
what do i change in screen.css to change the font size of the header menu items?
I’m working on the exact same problem right now and was coming here to ask a few questions. I’ve had success changing the font size and attributes by injecting code. It’ll override (but not overwrite) your theme, in a good way if you do it right. Try;
<style>
h1 {
font-size: 42px;
}</style>
… it changes h1 attributes site-wide. I’ve tried multiple themes with this snippet in place and nothing breaks. Way more efficient than editing a theme, if you want to switch themes later.
You can also add;
font-style: italic;
font-weight: medium;
… For different attributes. Taking it further, you can change fonts completely by injecting new ones, even web fonts.
Obviously I’m not cranking up to 42px, and there are other modifiers you can use to determine font size, this is just an example. And I’m literally 24 hours into learning CSS so my way is probably very clunky. I’m sure there’s a more elegant path.
If anyone’s reading this, what I’m trying to do is change the font-family and sizes of ‘blog-title’ and ‘blog-description’ only in my site header… I haven’t found a clean way to do that yet. If anyone can point me in the right direction I’d be very appreciative.
surely we cant be the first people to ask this question
We’re definitely not.
I’m finding it difficult to phrase and search for the info we need on this. When I look for CSS tips and tutorials I get sometimes decades old info, and even the current info usually has different syntax etc. There must be a place where Ghost specific syntax and functions are documented but I haven’t found it yet.
Did you try injecting that snippet?
If you find any joy in other directions let me know. We’re trying to do the same-ish thing, let’s learn together.
.site.nav in screen.css
font-size: 1.2rem;
This is the line of code that I can edit in the site inspector that changes the header font size, but changing it in the actual file doesnt seem to be working.
Sorry, I don’t know how to help you. To solve my own issue I went looking through all the stylesheet css files and saw how all the fonts are linked throughout the structure. In the end I decided to try to inject some code with that feature, and it worked for what I wanted to do. Came out incredible, and way simpler than editing someone else’s work. Nice thing is if I make a mistake in syntax it doesn’t break anything… I can just delete it and go back to baseline.
I have inadvertently changed the font sizes on the menu/nav buttons a couple of times (along with other unintended results) while making mistakes with code injection, so I know that it’s possible to do what you’re after via that route. Just saying.
If you edit screen.css you need to run gulp as per the documentation:
im on pro - if i was self hosted that wouldnt be a problem. I assume I need to contact support?
For what specifically? You can run gulp zip when you’re ready to put the changes on your pro instance
can you elaborate here? Are you indicating that I should have a local development setup … make changes, run gulp … i’m not sure what you mean by “run gulp”.
Yep, you need a local development set up, and when you are ready to upload, you need to run the command in your terminal. Everything you need should be in the docs 
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.