Menu Button Changes

I actually got this figured out. I changed the font size. Now I would like to change the font size for the header… but cannot find it in the HTML. I just want to shrink it a tad so it’s a little more in proportion.

When you say header, are you referring to page and post titles that use headings like h1, h2, etc, or do you mean the site title in the top header area?

Yes. Where our site says Hamilton Physical Therapy, P.C.

That can be done like this example:

.site-title {
   font-size: 2rem;
}

That worked PERFECTLY! Thank you!

You’re very welcome ??

Hello again ??
I’m trying to do this again because my links reset to normal size. I’m trying to paste the code again and it isn’t working. I’m pasting it in the main structure portion of the editor and change the font size to see if that is part of the issue but it won’t change.

Any tips?

hamiltonpt.com is the site. THANKS!!

greeings1

I’m hoping you are using a CSS plugin like Simple Custom CSS to do this?

Basically that adds a Custom CSS link under the Appearance menu group in the admin which gives you a blank stylesheet to add your own code (such as the one pasted previously).

I see there is a css style sheet (style.css). Last time I just pasted this into the coding and it worked automatically.

Also – under the style.css is this coding:
}
.site-title,
.site-description {
margin: 0;
font-weight: 400;
}
.site-title {
font: italic 2.625rem/1.1 “Playfair Display”, Georgia, serif;
}
.site-title {
font-size: 2rem;
}

So it’s already there. This changes the title, which on our site is Hamilton Physical Therapy, P.C. I need the width for our buttons (each location for our site) to be on one line and not wrapped around like it is currently. Is it any of the padding that needs to be changed?

Again, I was able to paste this code in before and it automatically worked and now it isn’t so I’m not sure what I’m doing wrong ?? Thanks in advance for your help! Sorry I can be a bit slow.

Would it be the margin that I need to adjust? I either need to make the font smaller or adjust the margin so that all of our menu buttons are on one line. We prefer not to make them super small. Even if we can only adjust the margins for those and nothing else? Or do we have to adjust ALL page margins to make this happen?

Thanks again!

Word of caution…never edit the theme’s own style.css file because you lose your changes whenever a theme update comes along.

Using a plugin like Simple Custom CSS is what you would use. This adds a “Custom CSS” link under the admin menu group “Appearance”. This is where you would create or add custom CSS.

Regarding your menu items and how the menu wraps to a second line, this is currently due to the long menu item titles for each one, so they take up more space. The only way to get it back into one line is to make the menu font smaller. Current styling is:

.primary-navigation {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.125rem;
    font-weight: 400;
    font-style: italic;
}

You will want to make the font-size to something like:

.primary-navigation {
    font-size: 0.875rem;
}

You can also adjust the padding on each one which is currently using:

@media (min-width: 992px) {
.primary-navigation li a {
    display: inline-block;
    padding: 0 0.5rem;
    white-space: nowrap;
    text-decoration: none;
    color: #222;
}
}

So your change would be:

@media (min-width: 992px) {
.primary-navigation li a {
    padding: 0 0.375rem;
}
}

I wouldn’t recommend going less than that, otherwise your menu items will be too close to each other.

That may be why everything changed automatically. Thank you so much for your help on this!!!

Is everything OK now? If so, we can probably set this topic as “Resolved”.