making header bigger moved header widget down (beautiful pro)

[nicoleakagidget]

Hi! I'm trying to make my header image bigger than the default of 320 x 120. The image I'm using now is 450 x 108 I updated the functions.php so it says this:

//* Add support for custom header
add_theme_support( 'custom-header', array(
'default-text-color' => '000000',
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 108,
'width' => 450,

and then I updated my style sheet like this:

/* Title Area
--------------------------------------------- */

.title-area {
float: left;
padding-top: 10px;
width: 450px;

But now it moved my header widget which is supposed to be top right, down below the header image level. Is there a way to make the header bigger as I did without bumping the widget down? Did I do something wrong here?

Thank you!

http://nicolevbennett.com

[Tonya]

Hello Nicole,

What you need to do now is adjust the header widget width down. So take the overall width 1140px - 450px from the logo area and this is what remains for the widget area.

Go to line 992 in your stylesheet and adjust from 800px down to 690px.

You'll have the same issue on iPads too. So go into the @media queries at around line 1500 and you'll see that the overall width is now 960px. You will want to split out the next lines so that content and the widget area are separate. Then adjust the widget area's width accordingly.

Cheers,
Tonya 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

One more tip for Nicole, make sure that you increment the CHILD_THEME_VERSION (it's on line 14 of your functions.php file). This version number is appended to your theme's assets, i.e. stylesheet and any js files.

This is important because when someone comes to your site, their browser stores these assets to help speed up page loading upon their visit. Therefore, when you make changes to your style.css file but don't increment the version, then all past visitors will not see your changes.

Cheers,
Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Author]

Posts