Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to make header responsive in Executive Pro?
Tagged: Custom header, executive pro, header
- This topic has 14 replies, 4 voices, and was last updated 9 years ago by Rosesilk.
-
AuthorPosts
-
April 19, 2015 at 11:52 pm #148495RosesilkMember
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/April 20, 2015 at 1:46 am #148499Brad DaltonParticipantYou can remove any padding in the Media Queries for any screen size.
April 20, 2015 at 12:43 pm #148574RosesilkMemberHi 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,
JuliaApril 20, 2015 at 1:01 pm #148575Brad DaltonParticipantYou 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.
April 20, 2015 at 1:51 pm #148583RosesilkMemberFirst 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.
JuliaApril 20, 2015 at 1:53 pm #148584Brad DaltonParticipantApril 20, 2015 at 1:56 pm #148585RosesilkMemberHi Brad,
My apologies. I though I linked to my site in my first post. Here it is:
Thank you,
JuliaApril 21, 2015 at 4:40 pm #148732RosesilkMemberI 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!
April 22, 2015 at 1:35 am #148763Brad DaltonParticipantApril 22, 2015 at 10:03 am #148811RosesilkMemberUnfortunately, 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.
April 28, 2015 at 9:41 am #149404mytrendyphoneParticipantI 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?April 28, 2015 at 10:18 am #149416RosesilkMemberHi!
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.
May 4, 2015 at 7:44 am #150088gdunganMemberI'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.
May 4, 2015 at 7:52 am #150089mytrendyphoneParticipantI think that I have solution (in my case). Check my CSS on http://www.beogradskiosmeh.com
May 4, 2015 at 9:23 pm #150153RosesilkMemberI'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!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.