Change header logo size according to device resolution

Shapely
1

Hey dear colorlib support,

I have a rather complicated question (on my side)…I’ve set a header which looks perfectly nice on my screen. However, when browsing the site on computers with lower resolution, the menu starts appearing in two lines which looks like a complete mess as the lower line is half-outside the header area. Problem is that the logo size is set by pixels. Is there a way I can work around that and tell the logo to resize depending on screen resolution? Or simply use a percentage size for that? (When I try the percentage at the moment, it cuts my logo and puts in a small square piece of it).

How can I do that properly?

This is the site:

https://studna-band.de/

2

Hello there,

I hope you are doing well today.

We can use a media query to change the way the logo functions on smaller screens.

You can use the following CSS code to change the logo by going to Appearance > Customize > Additional CSS and pasting it there.


@media only screen and (max-width: 1500px) {
.module.left.site-title-container img {
    height: 100px;
    width: auto;
}
}

Best Regards,
Support

3

Hey, many thanks! That worked great. However now I recognized that the right container with the menu doesn’t expand automatically, so I also need to change the font size of the menu items for lower screen resolutions (like computers with 1280 x 720 ) …can you tell me how to do that? Then everything is pretty fine for the site :slight_smile:

Thanks again!
Dom

4

Hello Dom,

Please try out this CSS code to change the font size on smaller screens:

@media only screen and (max-width: 1500px) { #masthead #site-navigation .menu li a { font-size: 10px; } }

Best Regards,
Support

5

Hey :slight_smile:

Sorry that I have to bother you again, but now I see the problem. Please watch the attached screenshot - in a small resolution, the container where the logo sits expands so that even with the small text size, the menu needs 2 lines…However that space in the container is unnecessary…how can I adjust that left container (or the right one) so the menu has far more space to the left? I just need the right CSS codes, then I can play with sizes until it fits my idea. But I can’t figure out the code to address the container widths.

Thanks again - I guess this will be completely solved after the next reply :stuck_out_tongue: