Title: Responsive header? Last modified: August 21, 2016 --- # Responsive header? * Resolved [mrmonster](https://wordpress.org/support/users/mrmonster/) * (@mrmonster) * [12 years, 9 months ago](https://wordpress.org/support/topic/responsive-header-2/) * The header on this theme doesn’t appear to be responsive. Anybody know how to do it? * Thanks 🙂 Viewing 11 replies - 1 through 11 (of 11 total) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 9 months ago](https://wordpress.org/support/topic/responsive-header-2/#post-4107731) * Can you link a page with unresponsive header? * Thread Starter [mrmonster](https://wordpress.org/support/users/mrmonster/) * (@mrmonster) * [12 years, 9 months ago](https://wordpress.org/support/topic/responsive-header-2/#post-4107740) * No, I was checking the demo out on mobile to see how it looked, and I could see that the header wasn’t shrinking; the image gets cut off on both sides. * Are you using this theme and is your header responsive? I really like Book Lite and my site needs a refresh, but I would definitely want the header to shrink to look right and to keep on brand on mobile. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 9 months ago](https://wordpress.org/support/topic/responsive-header-2/#post-4107742) * I checked the demo site and the waterfall image resized for me: [http://awesomescreenshot.com/07a1owr708](http://awesomescreenshot.com/07a1owr708)– What browser & browser version are you seeing the issue in? * Thread Starter [mrmonster](https://wordpress.org/support/users/mrmonster/) * (@mrmonster) * [12 years, 9 months ago](https://wordpress.org/support/topic/responsive-header-2/#post-4107749) * Chrome in Android. But that screenshot shows what I’m seeing, too. I was talking about the header image, btw — sorry I didn’t make it clear in my first post. At any rate, here you’re not seeing the entire image. You can test it out on the demo: * [http://demo.wpshoppe.com/book-lite/](http://demo.wpshoppe.com/book-lite/) * If you shrink your browser window you’ll see how everything conforms to the lower resolutions as you make the window narrower, except the header, which just gets cropped. * People have varying minimum requirements for responsive, though. Here’s an example of a true responsive header: * [http://wordpress.org/themes/quark](http://wordpress.org/themes/quark) * I think part of the issue here is that Book Lite’s header image is ginormous, so might have caused problems if the developer had made it responsive. I was planning on reducing the size of that masthead for a more normal header image. But I would need the header image to shrink for smaller resolutions. * The image isn’t being responsive; it * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 9 months ago](https://wordpress.org/support/topic/responsive-header-2/#post-4107750) * Sorry, I’m not sure I see the header image that you’re referring to. What is it an image of and whereabouts on the demo is it? * Thread Starter [mrmonster](https://wordpress.org/support/users/mrmonster/) * (@mrmonster) * [12 years, 9 months ago](https://wordpress.org/support/topic/responsive-header-2/#post-4107753) * That big waterfall image. Isn’t that the header image? It shows up on all the pages. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 9 months ago](https://wordpress.org/support/topic/responsive-header-2/#post-4107758) * Yeah, sorry I thought you meant something else like the black bar at the top. * I’m not sure what you mean by responsive, the image does shrink down to a certain extent as is default with CSS background images. * If you wanted to see the entire image on mobile you could set the background- size to 100%, but since the image is far wider than its height you’d get this result: [http://awesomescreenshot.com/0301owu380](http://awesomescreenshot.com/0301owu380) * Thread Starter [mrmonster](https://wordpress.org/support/users/mrmonster/) * (@mrmonster) * [12 years, 9 months ago](https://wordpress.org/support/topic/responsive-header-2/#post-4107761) * No worries! Still, the setting the size could work for the header I’m thinking of. I’ll just have to dive in. Where in the CS did you set that size? In the header section? * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 9 months ago](https://wordpress.org/support/topic/responsive-header-2/#post-4107767) * If the theme doesn’t come with a “Custom CSS” bit of the dashboard install this plugin: [http://wordpress.org/plugins/custom-css-manager-plugin/](http://wordpress.org/plugins/custom-css-manager-plugin/) * Then use that plugin’s [“Custom CSS Manager” part of the dashboard](http://wordpress.org/plugins/custom-css-manager-plugin/screenshot-1.jpg?r=704634) to hold your CSS modifications. * It might be worth trying out the ‘`cover`‘ and ‘`contain`‘ background sizes too. _ [https://developer.mozilla.org/en-US/docs/Web/CSS/background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)_ * Thread Starter [mrmonster](https://wordpress.org/support/users/mrmonster/) * (@mrmonster) * [12 years, 9 months ago](https://wordpress.org/support/topic/responsive-header-2/#post-4107770) * Awesome — thank you! * [Shellybelly57](https://wordpress.org/support/users/shellybelly57/) * (@shellybelly57) * [12 years ago](https://wordpress.org/support/topic/responsive-header-2/#post-4108129) * My custom header in book lite is also non-responsive. The content, menus etc. all adjust for mobile devices, but the header does not. [premierobgynnapa.com](http://premierobgynnapa.com) * I have tried scouring these forums and found what looked like good [@media](https://wordpress.org/support/users/media/) code, but perhaps I’m not putting it in the right place? (Into header.php) * Please help this is extremely frustrating! Viewing 11 replies - 1 through 11 (of 11 total) The topic ‘Responsive header?’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/book-lite/114/screenshot.png) * Book Lite * [Support Threads](https://wordpress.org/support/theme/book-lite/) * [Active Topics](https://wordpress.org/support/theme/book-lite/active/) * [Unresolved Topics](https://wordpress.org/support/theme/book-lite/unresolved/) * [Reviews](https://wordpress.org/support/theme/book-lite/reviews/) ## Tags * [header](https://wordpress.org/support/topic-tag/header/) * 11 replies * 3 participants * Last reply from: [Shellybelly57](https://wordpress.org/support/users/shellybelly57/) * Last activity: [12 years ago](https://wordpress.org/support/topic/responsive-header-2/#post-4108129) * Status: resolved