Site logo

Archived topic

.navigation-branding .main-title has huge line-height

7 replies · Started by Greg on March 15, 2021

Viewing posts 1–8 of 8

I have Mobile Header option enabled. This is output on the page:

.navigation-branding img, .site-logo.mobile-header-logo img{height:60px;width:auto;}.navigation-branding .main-title{line-height:60px;}

Where is this controlled in the customizer? My site title goes on to two lines on very small screens, so this looks horrible. I assume this was done as a hack to get the menu and text to vertically center. Any reason this isn't done with flexbox instead?

Also, why isn't the color for the site title copied from the full settings, and where do I set that for the Mobile Header?

Thanks for the quick reply!

I want the menu items to stay the height they are. I guess I'll have to add custom code to fix the site title height.

Ahh yes. We are thinking about adding an additional option for the mobile header height - although I'm not sure if it has been requested very often.

I'm happy to help with the CSS if you can link me to the page in question :)

I'll add code for color, too, but that seems like it should follow the rule for Site Title set in Colors > Header.

I discovered that the background color for the branding is controlled by the background color of the main navigation. That explains why it does not use the Site Title color. It is, however, highly unintuitive and feels very icky. I understand you probably can't change it now because older sites are using it this way, but maybe it could be toggleable—an option to have branding use the nav colors or not. My design originally called for a white header with a colorful menu dropdown below it. To save myself some grief, I've altered it, but don't completely enjoy the results.

This archived topic is closed to new replies.