How to adjust header height in Lyra

Themes
#1

Hello.

I’m looking for a way to adjust the height of the header in the Lyra theme. I basically want more of my header image to be visible on the front page.

Coding is virgin territory for me, so please bare with me in advance for silly questions.
Any advice would be much appreciated.
Thanks.

#2

In Ghost Code Injection (Site Header), add the following CSS code.

<style>
  .site-home-header .site-header-content { padding: 15vw 3vw 16vw; }
</style>

The theme default value is 5vw 3vw 6vw. Increased in the code above to 15vw 3vw 16vw. So, feel free to change and adjust that.

#3

Thank you so much!
What does vw stand for?
(I’m guessing it’s not Volkswagen…)

#4

Indeed, it stands for the browser viewport width : )

#5

Thank you so much @ahmadajmi.
One more detail, if I may?
How do I make the site title smaller on mobile screens?
I have a 20 character site title in three words. The last word disappears when scaling down to mobile screen size. Is there an equally quick fix for that?

#6

Would you mind sharing your blog URL or a screenshot?

#7

I don’t mind but there is no need to. I figured out late last night that it was the middle number of the code snippet you gave me, which controls what I guess is the padding of the site title. I had set it to too high a number. Anyway, it works now.

Thank you so much for your time and advice. :slight_smile:

1 Like
#8

Pleasure & that’s great : )

1 Like