Archived topic
How to add CSS to Header Element?
3 replies · Started by Willya on July 6, 2022
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?
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!
Hi Fernando,
Thank you very much! The CSS code you provided works beautifully.
You’re welcome Willya!
