Create Full-width Custom Header in Executive Pro

[susanta]

I am trying to use a custom full-width header in Executive Pro theme, as suggested by StudioPress http://my.studiopress.com/tutorials/setup-custom-header/.

My goal is to make it appear exactly as it appears when applied to a Genesis Sample Theme. (Screen Shot: http://bit.ly/1UpyxCB)

Here's the code snippet I used in my functions.php file:

/** Add support for custom header **/
add_theme_support( 'genesis-custom-header', array( 'width' => 2000, 'height' => 200 ) );

However, when the above code snippet is applied to Executive Pro theme, the result is NOT the same. For example: http://bit.ly/1SJoo5P

Can you help me figure this out, please? Is there a code snippet that allows the header to mimic the same result that we can achieve in Genesis Sample Theme?

Appreciate any help!

PS: I have used this code before in Genesis Sample Them and it's working perfectly.

http://www.thecontenteditors.com/

[Christoph]

Hi,

Executive Pro already declares support for a custom header around line 42 of the functions.php. Just change those values.

Then open style.css. Around line 1043 you will find the following:

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

Adjust max-width and min-height to your values.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[susanta]

Thanks for your reply, Christoph! Actually I have already tried that but I wasn't able to create a full-width head banner like I did in case of Genesis Sample Theme.

[Christoph]

Oh, you mean "screen-wide" and not the full-width of the container.

Remove max-width from .site-container around line 487 of the style.css.
You will have to add a max-width to the elements that you don't want to be "screen-wide".

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[susanta]

Thanks for the help, Christoph! I removed the max width value from .site-container in css. However, for some strange reason, I am still able to see the value to be present there when I check it on Inspect Elements. When I delete the value using Inspect Elements, the head goes screen-wide but it's not happening when I delete it in the css. This is quite strange as I don't find the value to be present anywhere within the CSS file.

[Christoph]

You are welcome.

Clear any cache from Cloudflare, a Plugin (w3 total cache,...), your web host and in your browser.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[susanta]

Thanks a lot! It helped!

[Author]

Posts