Header height in %

You could use viewport units like this:

.has-banner {
    height: 70vh;
}

Or you can write some media queries and change the height in pixels for various screen sizes.

Thanks for the quick response!

But when I try your code, it doesn’t work properly. I’d be very grateful if you could give an example of medie queries. I really don’t know how to fix the problem with the damn banner! ??

Thanks alot!

Hi vladff!

the has-banner doesn’t do anything for me – I use

.site-logo {
  top: -18px;
}

.admin-bar .stuck {
  height: 7vh;
}

/* Bar normal */
.top-bar {
  height: 10vh;
  background-color: #343538;
  opacity: 1;
}

Link here>
Works fine in full-screen but on a small screen the logo isn’t sized anymore and the bar doesn’t expand when I want to show the menu!

How can I fix this?

Thanks!