[Resolved] How to add CSS to Header Element?

[Willya]

Hi,

I have 2 types of logos on my blog.

One for general logos, and one for specific post categories. So, I created it in the header element, then I specified it only for certain post categories.

All worked as I expected. However, I want the logo that I created in the header element to have a different height from the general logo in the mobile display.

But, I’m confused how to add CSS to the header element?

If I change it in Customize > Layout > Primary Navigation > change menu height, the general logo changes too.

How do I change the menu height only for the logo I created in the header-element and only change on mobile?

[Fernando]

Hi Willya,

Here’s some CSS you may add in Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
    .site-logo img {
        width:180px !important;
        height: auto !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .site-logo img {
        width:200px !important;
        height: auto !important;
    }
}

@media (min-width: 1025px) {
    .site-logo img {
        width:400px !important;
        height: auto !important;
    }
}

This is for mobile, tablet and desktop accordingly.

You may change the values to your preference.

Hope this helps!

[Willya]

Hi Fernando,

Thank you very much! The CSS code you provided works beautifully.

[Fernando]

You’re welcome Willya!

[Author]

Posts