Executive Pro Custom Header Problem (not full-width!)

[sweiss]

Hi all,

Sorry for my ignorance, I am new to this forum. I have been re-designing our website in a staging area (http://weisspaarz.staging.wpengine.com/). I want our header's logo to be significantly bigger. When I change the functions.php file & CSS to a bigger px image and upload it, the logo looks bigger but there's a huge space below the logo and also in the right-header section where I have placed a phone number & social media buttons...the right-header widgets get lowered down and are no longer properly aligned with the logo. Because of this, I switched it back to the weirdly small logo/properly aligned right-header widgets for peace of mind...

Anyone know how to fix this? I tried re-sizing the header-widget in CSS but this did not work. I know there must be an easy way to fix the issue.

Anyone's help is greatly appreciated 🙂

http://weisspaarz.staging.wpengine.com/

[Brad Dalton]

Generally you need to reduce the width of the header right widget by the same value as you increase the title area for your image.

If you add it using the Custom Header uploader, you need to match the values in the PHP code in your functions file with the dimensions of your header.

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

---

Get Help – Book Consultation.

[sweiss]

Hey Braddalton,

Thanks for your feedback! That's just it...I tried re-sizing the header right widget by decreasing it's width the same amount as I increased the title-area logo's width...still ended up with the same result. I couldn't find anywhere in the .php files to alter the header-right dimensions though, only the title area image dimensions, so I was only trying on the CSS file for the widget area (whereas with the logo obviously I edited dimensions on both php & CSS).

Any ideas?

[sweiss]

Ok, figured this out for anyone else with the same issue...just to reiterate, this will be for anyone that wants a logo in the title area on Executive Pro theme in header that's bigger than the programmed 260x100 dimensions but smaller than the full-width header that Brad's guide outlines---also will keep any right-header widgets intact while enlarging logo title image if you follow below instructions.

A few different things need to be changed in this situation to avoid random white space below the logo & the widgets on the right from moving down.

1. function.php (as described in Brad's tutorial)
2. style.css file for the following three things:

a---max width & min height under .header-image title-area section to fit your custom image (also described in Brad's tutorial),

b---.site-header .widget-area (in widget section below) to equal "960px - (your image width here)"...i.e. if your logo image is 300px wide, you'll want to change this dimension to 660px (960-300=660)...etc...

c---.site-header .widget-area (in @media only screen and (max-width: 1200px) section!) to also match the dimension you altered above (i.e. again if your logo image is 300px wide, you'll want to change this to 660px also, as in b)

It was only with all of these things altered that I was able to get the result I was shooting for. Brad's guide is great and does go over media query sections for mobile responsiveness. Hopefully this helps someone else someday!

[Author]

Posts