• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How to make header responsive in Executive Pro?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to make header responsive in Executive Pro?

This topic is: not resolved

Tagged: Custom header, executive pro, header

  • This topic has 14 replies, 4 voices, and was last updated 7 years, 9 months ago by Rosesilk.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • April 19, 2015 at 11:52 pm #148495
    Rosesilk
    Member

    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 #148499
    Brad Dalton
    Participant

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


    Get Help – Book Consultation.

    April 20, 2015 at 12:43 pm #148574
    Rosesilk
    Member

    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

    April 20, 2015 at 1:01 pm #148575
    Brad Dalton
    Participant

    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.

    April 20, 2015 at 1:51 pm #148583
    Rosesilk
    Member

    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

    April 20, 2015 at 1:53 pm #148584
    Brad Dalton
    Participant

    Can you link to your site please.


    Get Help – Book Consultation.

    April 20, 2015 at 1:56 pm #148585
    Rosesilk
    Member

    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

    April 21, 2015 at 4:40 pm #148732
    Rosesilk
    Member

    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!

    April 22, 2015 at 1:35 am #148763
    Brad Dalton
    Participant

    I think its caused by the height of 200px.


    Get Help – Book Consultation.

    April 22, 2015 at 10:03 am #148811
    Rosesilk
    Member

    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.

    April 28, 2015 at 9:41 am #149404
    mytrendyphone
    Participant

    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?

    April 28, 2015 at 10:18 am #149416
    Rosesilk
    Member

    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.

    May 4, 2015 at 7:44 am #150088
    gdungan
    Member

    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.

    May 4, 2015 at 7:52 am #150089
    mytrendyphone
    Participant

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

    May 4, 2015 at 9:23 pm #150153
    Rosesilk
    Member

    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
Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble