Tagged: logo, sticky header
When I go into the sticky header mode, the logo I am using ends up going right to the top and bottom edges. Is there a way to add some top and bottom padding around the area so it does not ‘kiss’ both the top and bottom borders of the element?
I think my other option is to insert whitespace into the logo image and have the padding essentially hardcoded into the image.
BTW, I can’t see any logo retina support on the theme options panel. Is this a feature you’d be interested in introducing? Also since WordPress 4.4 was released, they have better support for responsive images and also perhaps retina support. I’ve seen the plugin called Retina 2x and would be very much interested if something like this could be ‘baked in’ to the theme so all a user like me would do is upload a nice big fat resolution 2x file and have Enfold and WordPress take care of making all the image copies for suitable displays.
I mean normal images look quite shoddy when looking at them on a 2x retina display device or even the new 3x retina devices.
Thanks!
Hi rarch47,
Could you provide us with a link to the site in question so that we can take a closer look please?
Best regards,
Rikard
Sure thing. It’s summitshutters.com.au
Hi!
Please add following code to Quick CSS
.header-scrolled .logo img {
padding: 10px 0;
}
You can simply upload your images in double size and they will be resized automatically and will look fine on retina displays :)
Cheers!
Yigit
Thank you.
I also needed to add the following CSS so the logo did not appear too big within the header.
strong.logo a {
max-width: 300px;
}