Header Height Grow as Needed?

[WPDave]

Hi,
I’m trying to create a header bar that will grow vertically, as needed, to accommodate the height of the text it contains. The site title is Renaissance Theatre Company and that works fine horizontally on larger screens. But on my phone it needs to stack the words vertically. The problem is the header bar height is fixed. I’ve set the height in the bar dimensions to 5 em. That looks pretty good on most screens but on my phone the text within a container overflows the height of the bar. If I increase the height to 7+ em then it works for my phone but it’s taller than needed for most screens and doesn’t look good.

I’ve experimented with various Flex options but can’t seem to find anything that does what I want. You can see the problem at http://lagunanigueltheatre.org/

Is there any easy way to have the bar automatically expand?
David Salahi

[ruenel]

Hello There,

Thanks for writing in!

To resolve your issue, please edit your header and in click the container. Find the “Customize” tab and insert this custom css:

@media(max-width: 767px){
  .$el.x-bar-content {
    -webkit-flex: 0 1 90%;
    flex: 0 1 90%;
    height: 8em;
  }
}

We would loved to know if this has work for you. Thank you.

[WPDave]

Hi RueNel,
Thanks for the quick reply. Unfortunately, I’m not having any luck with this CSS. I’ve tried applying it to the container with the text but it didn’t make any difference. There’s another container in the same bar so I tried adding it to that one, too; still, no help. I also tried applying it to the bar but, again, it didn’t make any difference.

Any other suggestions?
David

[ruenel]

Hello David,

Would you mind providing us access to your site so that we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
Thank you.

[WPDave]

Please see secure note added to previous post.
David

[friech]

Hi David,

@WPDave

I’ve set the height in the bar dimensions to 5 em.

That was the issue, you need to set the bar height to auto so it will respond to its content.

Another issue I saw is your social icons, please set an equal min-width and height on those so they don’t look squeeze. Set the bar to Wrap Children so the icons will stack to the headline when the screen gets narrowed (mobile view).

Hope it helps,
Cheers!

[WPDave]

Thanks so much, friech! This is exactly what I needed!!
David

[Prasant]

You are most welcome.