Prevent the site title from wrapping to a new line when using the Zen mobile menu

[georgew509]

I have been working with the Zen theme by @frjo . I have made several color/customization changes. But there is one last change that I would like to make and I cannot figure it out (still learnings Hugo/CSS).

I would like my site title “Altoplace” to stay inline with the Logo. This works fine by default with a larger screen (https://altoplace.com).

However, when I shrink the screen width, the site title moves to the next line:

I can see that this behavior would be desirable for a longer site name, but I believe that my site name may be short enough to remain on the same line (as I view my site on my iPhone).

I was just wondering if anyone has come across this issue and could suggest where I should take a closer look to implement this change? I know that it’s going to be in baseof.html (and/or related scss code), but I cannot spot the change that needs to made.

[frjo]

In your custom css file add this:

.header {
  display: flex;
}

It is set in hugo-theme-zen/_header.scss at e55e50b273860a7e18345b3f24a665bec484db4b · frjo/hugo-theme-zen · GitHub but only for larger screens.

Now that you have made me look at the code I might look it over a bit.