Hi,
I’m having some issues with my masthead graphic.
1. The Site Title text (under Settings->General) overlaps with my masthead graphic. I’ve tried using the “Full Width Page, No Title” template in the Pages section, but that didn’t work.
2. What are the correct dimensions for the masthead graphic? As you can see on the site, it didn’t scale very well.
3. When the page is viewed on a phone, the header widget overlaps the masthead graphic. Is there a way to place the widget underneath the masthead graphic when in responsive mode?
4. (Bonus) Is there a way to specify a different graphic to use for the masthead when in responsive mode?
If I’m totally coming at this from the wrong angle, let me know as well. :)
Thank you,
-Jason
Hi Jason
One very simple way of handling this is to create a single image 1080px wide and your preferred height. Add that as your logo under Appearance > Theme Settings. In order to get a 1080px wide logo to fill the header we need the following under Appearance > Custom CSS:
/* Full header logo */ header#masthead { padding: 0 !important; } header#masthead .hgroup { padding: 0 !important; } header#masthead .hgroup .logo img { width: 1080px; } .main-navigation { margin: 0 !important; } body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar { display: none !important; }Let me know if that works for you.
It looks like that will work out great! I just have to create a new graphic that will replace the info that was in the original header widget, and make the graphic more to scale. Thank you very much!
For sure.
If you change your mind and you’d rather use the widget, let me know and I’ll find another way to do this.