Ensuring Headers are on One Line & Same Font Size
-
Hello,
To increase the white space on my blog posts, I changed the Base Font to Large.
After making this change, my header menus at the top no longer look consistent. The one on the upper right also increased to 2 lines.
1. I would like the blog title, upper left (Travels with Tricia) to be be the same font size and style as the menu headers in the upper right.
2. Also, I would like the menus in the upper right (Home, Blog, About, Destinations, Topics, Contact) to appear on one line, not two lines.
I suspect I need two snippets of code here. Does anyone have an idea of what they might be?
Many thanks for your help. :)
The blog I need help with is: (visible only to logged in users)
-
I’m looking at your site now, and the menu is one line. You are probably playing with the settings at the moment, yes?
As for font size, I can see the site title is Merriweather bold 16.5 point and the menu is Merriweather bold 17 point.
Try this in your custom CSS. Tell me what happens.
.site-title p {
font-size: 20px;
} -
Change the 20px to the desired font size. I would try, though, making the page title a little bigger than the menu links. Just to see how it looks.
-
Ok now I see what you mean about the menu. When you narrow the browser the menu wraps.
In this screenshot, see the box around the menu? The theme is confining that content to what looks like one-half of the total page.
The width may be adjustable in css, not sure. Let me think on that one.
-
You can also try this to control the site title’s font weight and size, if the first code snippet doesn’t work.
.site-title {
font-weight: bold;
font-size: 20px;
} -
Thanks for your replies, @samanthainnes! Much appreciated. :)
I input the below code. The site title (left) is now larger, but the menu (right) is still wrapping to a second line.
.site-title {
font-weight: bold;
font-size: 21px;
}What do you think?
-
Very nice. How about changing the font color as well, to increase the contrast against your background photo?
Try a nice inky blue.
font-color: #12405b;
-
If you pull your browser out to make it wider, does your menu go back to one line? This wrapping behavior is actually what you want to see – it’s responding to the screen size. Notice if you make the browser width really narrow, it converts the whole menu to the mobile version.
-
Thank you, @samanthainnes!
Yes, you’re right that the menu is responsive – depending upon the width of the screen. I think I’ll leave it as it is now. :)
Regarding the title font color recommendation, what do you think is the best way to address different colored background photos? Some of mine are dark (work well with white font titles) whereas other photos are light (work well with dark font titles).
-
re: Responsive menu, I think it’s a good call to leave it for now.
re: Color contrast – that is a good tricky question! I just noticed that when you scroll down, a black background appears behind the top bar. So making the text light wouldn’t work. BUT you still want the flexibility to use a lighter colored image in the first position and have it readable.
What theme is this?
-
-
Unless there is a theme setting that turns on/off this menu bar behavior, I think trying to change it could require a bit more code edits than it might be worth.
So the choices would be: let it go for now with the current image; it’s a lovely photo and the text *is* readable, just a bit light. Or, choose a different image that will create higher contrast.
A third, probably not ideal solution would be to simply add a black bar to the top of your lead image using a photo editor. But this leads to a lot of work – many blog images would potentially need the same treatment and the bar height has to be very precise. So I would probably not go down that road at this time.
-
Hi @triciaannemitchell, what about putting a translucent background on the header area. Add the following to your custom CSS and see what you think. You can adjust the 0.4 value (last in parentheses) which is the opacity. The first three numbers are the RGB color code for black. The closer to 1, the more opaque, the closer to 0, the more transparent.
.header-wrapper { background-color: rgba(0, 0, 0, 0.4) } -
Thank you @thesacredpath!
@triciaannemitchell – let us know what happens when you try this. It’s tricky because you are trying to accommodate both light and dark photo backgrounds with one header style. You may need to play around with it a bit.
-
@thesacredpath and @samanthainnes
I like the translucent background on the header area. Thank you very much for that code, as well as the helpful explanation about how to change the opacity. I greatly appreciate your help. :)
-
- The topic ‘Ensuring Headers are on One Line & Same Font Size’ is closed to new replies.
WordPress.com Forums 