Modifying H1 values

carlajuniper · Member · Oct 27, 2014 at 3:10 pm
Copy link

Add topic to favorites
I want to adjust the size of H1 text without making the body text larger. How can I do this with CSS?

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Oct 27, 2014 at 4:34 pm
Copy link
Hi Carla,

If you mean the headings that you can add in your pages and posts then something like the following should work:
```
.hentry h1 {
  font-size:24px;
}
```
If you mean a specific title or section of your site then could you state which bit and the theme that you are using. CSS is theme specific so what you’ll need will be different depending on the theme, and your site is set to private so I can’t check it myself.
carlajuniper · Member · Oct 27, 2014 at 4:58 pm
Copy link
Hey!

Thanks for your help, but it didn’t quite work. I want to make the menu items and the titles of the thumbnails larger while keeping the body text at the same size. (They seem to be controlled by the same attribute in the general options.) I have made my site public so you can see.

Thanks!
hallluke · Member · Oct 27, 2014 at 5:19 pm
Copy link
Add this to your existing custom CSS, feel free to change the sizes:
```
#site-navigation {
  font-size:1.2rem;
}

.wf-active .entry-title a {
  font-size:1rem;
  line-height:1.2;
}
```
thesacredpath · Member · Oct 27, 2014 at 5:21 pm
Copy link
Hi there, the menu items are not h1. To change the menu items, you need to use the following selector and then add the declarations you want to change.
.main-navigation a

To change the entry titles below the thumbnails on your main page, you need to use this selector.
.entry-title a, .portfolio-entry-title a
carlajuniper · Member · Oct 27, 2014 at 5:22 pm
Copy link
Amazing, thank you! Unfortunately my menu is now too big and spills on to the line below – how can I shift it to the left?
hallluke · Member · Oct 27, 2014 at 8:04 pm
Copy link
This will shrink your logo and expand the menu section, feel free to change the percentage values (as long as they sum to 100%):
```
.site-branding {
  max-width:40%;
}

.main-navigation {
  max-width:60%;
}
```

No items found.