How to make header responsive in Executive Pro?

[Rosesilk]

Hi,

I have been trying to add a full-width header to Executive Pro. I found this article: http://wpsites.net/web-design/add-full-width-header-image-to-executive-pro-theme/

I have followed the instructions and it works great for the desktop view. But when I view my page on mobile devices, there is a big blank spot below the header (above the content). My theory is that it's because my header image has different proportions than the original header dimensions, but I may be wrong about it.

Does anyone have any ideas of how to fix this?

Thank you very much.

http://wpsites.net/web-design/add-full-width-header-image-to-executive-pro-theme/

[Brad Dalton]

You can remove any padding in the Media Queries for any screen size.

---

Get Help – Book Consultation.

[Rosesilk]

Hi braddalton,

I'm not clear on how Media Queries work so would you mind seeing if I'm on track? Would I remove the padding from this place:

In the "In the @media only screen and (max-width: 1023px) {" Section:

.genesis-nav-menu a,
	.genesis-nav-menu > .first > a,
	.genesis-nav-menu > .last > a,
	.site-header .genesis-nav-menu a {
	padding: 16px;
	}

Is this the right place?

On a related note, is there a function on Firebug that I could use to inspect my site from a mobile view? If so, I might be able to figure these things out easier. As it is, I don't know how see the code on mobile sites.

Thank you very much for your help,
Julia

[Brad Dalton]

You can reduce the size of your screen and then inspect the element which needs modifying at that screen size.

Grab the CSS which needs adjusting using your browsers inspect tool, modify it and add it to the media queries.

Example:

@media only screen and (max-width: 1023px) {

	.site-header .widget-area{
		width: 100%;
	}

}

Changes the header widget width to 100% if the screen is smaller than 1023 pixels wide.

There's heaps of browser plugins to choose from.

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

In your case, try something like this:

@media only screen and (max-width: 1023px) {

            .genesis-nav-menu a,
	    .genesis-nav-menu > .first > a,
	    .genesis-nav-menu > .last > a,
	    .site-header .genesis-nav-menu a {
	        padding: 6px;
	    }
}

Adjust the value for the padding property to your liking.

---

Get Help – Book Consultation.

[Rosesilk]

First of all, Brad, thank you for the tip about reducing my screen size in my browser. I did than and it worked great. I used firebug and this is what I found in the code for the big white section below my header:

.header-image .site-title a {
  float:left;
  margin:0;
  max-width:1140px;
  min-height:200px;
  padding:0;
  width:100%;
}

I thought that the problem might be with "min-height". Once my header is shrunk in the mobile view, I wondered if the mobile browsers were still leaving 200px height for the header, even though it didn't need the full space. I tried deleting this in Firebug but it didn't help. The white space remained.

I know that you have suggested that the padding is the issue but I'm not sure this is right. The white space is much larger than any padding setting I can find. I think there is something else going on. Any other ideas? If not, I may try support for this issue.

Thank you again. You've been very helpful.
Julia

[Brad Dalton]

Can you link to your site please.

---

Get Help – Book Consultation.

[Rosesilk]

Hi Brad,

My apologies. I though I linked to my site in my first post. Here it is:

http://stress-free-mama.com/

Thank you,
Julia

[Rosesilk]

I still haven't figured out what is going on with the white space below my header when my site is on mobile devices. Does anyone have any clues for me?

Thank you!

[Brad Dalton]

I think its caused by the height of 200px.

---

Get Help – Book Consultation.

[Rosesilk]

Unfortunately, that's not it. I tried playing around with height in lots of different ways and it broke the desktop view.

I may need to find hire someone to figure this out for me.

I appreciate all your help, Brad. Thank you very much.

[mytrendyphone]

I have the same problem on my site: http://www.beogradskiosmeh.com
I did't test on all mobile devices but on iPhone 5 I can't reduce header (1140x100px).
What can I do?

[Rosesilk]

Hi!

Unfortunately, I never figured out an answer. I needed to put this mystery on hold but I'll pick up my investigation again this week. If I figure anything out, I'll post it here.

[gdungan]

I'm having a similar problem with my site. Anytime I place a widget in the right side of the header, it gets pushed down on mobile devices.

[mytrendyphone]

I think that I have solution (in my case). Check my CSS on http://www.beogradskiosmeh.com

[Rosesilk]

I'm glad you worked it out. Unfortunately, I don't think your CSS will work for me because I put my header above the normal position. However, I wondered if "overflow" might work for me. I'll experiment with it and let you know later.

Thanks for posting an idea!

[Author]

Posts