Change font size top menu items, twenty seventeen

Leave the style.css and other .css files alone, changes you make here are easily lost in updates etc.

1) The trick with css is to be target the css correctly using appropriate classes and id. Learn to use your browser inspector to find what these are for any element on your pages, it also matters what order changes are added, later changes trump earlier settings. In this case add this to you custom css, login to your dashboard, then view your webpage of interest, along the top choose customizer, then find the additional css, and add this:

.navigation-top a {
 font-size: 120%;
}

2) Again using a browser inspector I find that your heading has classes like this:, so add

.content-area h1.entry-title {
 font-size: 180%;
}

@szmad, In future please post on your theme’s support section https://www.ads-software.com/support/theme/twentyseventeen/#new-post

@rossmitchell, Good support

Thanks a lot Ross Mitchell. The first bit of CSS, for navigation-top, worked. The second bit, for the entry-title header, did not. I did open up the source code (in Chrome), and got a sense of how it works, so I tried a bunch of different class names, but none of them worked. I tried site-content, site-content-contain, site-main, and entry-header, and none worked. I tried different names following the first class, still no luck.

Ideas?

I really appreciate your help!

Very good. Viewing the page source is one thing, very helpful but there is so much to sort through, a storm of details. Please in addition get familiar with the browser inspector, it lets you focus in on the exact region of interest, like a laser beam.
So that I can apply this laser beam for you, could you kindly provide the details of one of your pages which has multiple headings:
– The URL of such a page.
– The text of the different headings.

Thanks Ross. I did find the web inspector, and it is indeed helpful, because it shows the heirarchical structure of the code. The text area where I want to increase font size is indeed “entry-title,” h1, under “content-area,” so it seems your code should have worked. I tried “entry-title” by itself and that didn’t work.

Any of the top menu items produce a header when you click on them. For example, go to the page https://www.ocf.berkeley.edu/~madelucchi/professional-experience-and-education/, and the header (entry-title) in the content area is “Professional experience and education.” That’s what I want to make larger.

It can be a challenge to give the css selectors sufficient weight to dominate the evaluation criteria and hence get their properties adopted. There are rules about this that I have never learned, instead I add selectors that are appropriate but not too specific to do the job. The browser inspector also helps here, this is what right click Copy > CSS Path gave me:
html.js.svg.background-fixed body.page-template-default.page.page-id-98.wp-custom-logo.page-one-column.colors-light div#page.site div.site-content-contain div#content.site-content div.wrap div#primary.content-area main#main.site-main article#post-98.post-98.page.type-page.status-publish.hentry header.entry-header h1.entry-title
Which is way too much, and specific to just this page, so I would try:

.site-content #primary..content-area .entry-header h1.entry-title {
 font-size: 180%;
}

The browser inspector will show you in the css area if your phrase has or has not been incorporated.

Hi Ross,

It worked, brilliant, thanks so much!! (I took out the second period after #primary.., and changed the font size to 120%.)

Interestingly, the additional CSS changed the font size for all of the entry-title headings except that fr the “Home” page, which I suspect uses a different header level. I’ll investigate and report back.

Again, thanks.

Oh, I just looked at web inspector for the “home” page, and there is nothing that highlights the header “home,” in fact there is no mention of a heading in that field at all. So I guess I’ll just have to live with it as is.

there is no mention of a heading in that field at all. So I guess I’ll just have to live with it as is.

If you want to change this, and are good for a little work, then you could take control of the layout of the homepage by giving it a specific custom page template.
This should be done using a child theme as otherwise the changes get lost in updates. Details of creating a child theme here:
https://codex.www.ads-software.com/Child_Themes
How to figure out the name of the page template:
https://developer.www.ads-software.com/themes/template-files-section/page-template-files/page-templates/
https://developer.www.ads-software.com/themes/basics/template-hierarchy/

Its up to you.