Changing Only Header & Navigation Menu Font Sizes

thecomputernoob · Member · May 20, 2021 at 10:17 am
Copy link

Add topic to favorites
Greetings!

Would it be possible for me to change my website’s header and the navigation menu font sizes independently without affecting the site-wide fonts?

Thanks!

The blog I need help with is: (visible only to logged in users)
tarasdashkevych · Theme Author · May 21, 2021 at 3:29 am
Copy link
Hello,
Yes, it’s possible with a use of custom CSS.

Please use this custom CSS to change the size of the site title:
```
.site-title {
  font-size: 1.125rem;
}
```
Please use this custom CSS to change the size of the main menu items:
```
.main-navigation {
  font-size: 0.9rem;
}
```
Hope this helps. If you have any additional questions, please let me know.

Kind regards,
Taras
thecomputernoob · Member · May 21, 2021 at 8:19 am
Copy link
Works perfectly, thanks!

However, is there a way this can be scaled automatically for mobile devices so a higher font value for the site title does not make it overflow into a next line for a mobile device? Maybe some automatic value that just keeps it edge-to-edge?
tarasdashkevych · Theme Author · May 24, 2021 at 2:57 pm
Copy link
I usually use CSS media queries to change these values in mobile views.

Here is an example:
```
.site-title {
  font-size: 1.125rem;
}

.main-navigation {
  font-size: 0.9rem;
}

/* On screens that are 500px wide or less, change the font sizes */
@media screen and (max-width: 500px) {
   .site-title {
    font-size: 2rem;
  }

  .main-navigation {
    font-size: 0.7rem;
   }
}
```
As an another solution, you may also try to use vw (viewport width) unit for the site title and menu items. So, instead of rem, use vw. Here is an example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

Hope this helps. Please let me know if you have any additional questions.

Kind regards,
Taras
thecomputernoob · Member · May 25, 2021 at 10:32 am
Copy link
Thank you, Taras!
tarasdashkevych · Theme Author · May 26, 2021 at 6:55 pm
Copy link
You are very welcome!

Best regards,
Taras

The topic ‘Changing Only Header & Navigation Menu Font Sizes’ is closed to new replies.

WordPress.com forums

Changing Only Header & Navigation Menu Font Sizes