Responsive header not working

now that ive renamed and uploaded the header.php file the layout is completely off now!

updating the header.hp file and style.css in the child theme with the new image and renaming the header so it was the same as the parent theme file completely messed up the layout. I’ve now removed both these files and activated the parent theme so the site looks normal…
??

Your active theme should be your child theme, but before you start trying to reactive your child I would copy the header.php file from your parent and paste it into your child. Then when you reactivate the child check to make sure the site still looks the same as it did with an active partent.

If everything still looks the same make sure this css code is in the custom css file you are using.

#headImage {
    display: block;
    float: none;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

At this point refreshing your site will not show any changes at all. that is expected.

next place the following code in the child theme header.php file just below the <header id=”masthead” class=”site-header” role=”banner”> line (see the example above if you need clarification.) Dont’t forget to trade out the image in the following code for your header image instead of mine.

<div id="headImage">
<img src="https://sandbox.michaelsmithportfolio.com/wp-content/uploads/2014/06/SandboxHeader.jpg" alt="SandboxHeader.jpg" width="960" height="180" class="alignnone size-full wp-image-26" />
</div>

If you did everything correctly the header of your site will look like the header at https://sandbox.michaelsmithportfolio.com/

Hi Michael,
going to try the steps above. When you say
“If everything still looks the same make sure this css code is in the custom css file you are using.
#headImage {
display: block;
float: none;
margin: 0 auto;
text-align: center;
width: 100%;
}”
Do you mean I should check if this code is in the style.css file in my child theme? If that is the case it is not. Should I add it at the end after theme customization?

Ive followed the steps above I must be doing something wrong?? It still looks off: the header image appears but there are still white bits on the sides and a big white blank below.
this is the code i copied in the header.php in the final step:

<div id="headImage">
<img src="https://www.oliviaontheriviera.com/wp-content/uploads/2014/06/oliviaontheriviera-header-180x1200.jpg" alt="oliviaontheriviera-header-180x1200.jpg" width="1200" height="180" class="alignnone size-full wp-image-26" />
</div>

Ive also noticed there is a custom header php file in the parent theme. could this be causing issues?

wait a min, i check ur css,
.site-header {
background: url(“https://www.oliviaontheriviera.com/wp-content/uploads/2014/06/oliviaontheriviera-header-180×1200.jpg&#8221;) no-repeat scroll center top rgba(0, 0, 0, 0);
}

looks strange..looks like it’s fixed

correct me if i’m wrong, this is static method of placing header rite?
Not the wordpress way

.site-header {
background: url(“https://www.oliviaontheriviera.com/wp-content/uploads/2014/06/oliviaontheriviera-header-180×1200.jpg&#8221;) no-repeat scroll center top rgba(0, 0, 0, 0);
}

Sorry not sure what you mean?
Right now I have the parent theme active as I can’t get the header right on the child theme. I originally uploaded a header image in the wordpress interface=>appearance=>header.
The problem is that the heade rimage does not adapt to mobile layout and on a pc browser I also have white bits on either side (like if it were too short)…

the css code should be placed into style.css in your child theme. Without that code in place the header will not be responsive.

I still don’t see the new div in the php file

Lets try getting the php in place in a different way.
? Download the header.php file from the link below.
? Open in in a text editor like notepad.
? Copy the whole thing from beginning to end.
? Then replace everything in your child header.php file the code from the linked header.php file.

https://www.dropbox.com/s/19309umi85kv39j/header.php

Also, Are your removing the old header image by going to Appearance > Customize > Header Image and clicking remove image? This won’t work if you have the old header image in place.

@rosamundwo – the problem we are having is that the theme Olivia is using sets the header image as a background image that will not scale down responsively. I could’t find a way to fix that via css alone so I’m having her add an html element into her header.php file that will react appropriately. The css Code you posted doesn’t’ address the responsive problem we are trying to solve. You can see the result I’m trying get on Olivia’s site here: https://sandbox.michaelsmithportfolio.com/

If know of a simpler way to achieve this effect i would love to know how.

Oh and Olivia if your parent theme is active that would explain why i don’t see the new div in the header.php file. You may have the php modified correctly but if im going to trouble shoot you need to leave the child theme active.

Michael i am putting the child theme “back on” so you can take a look and will follow the steps in your latest post and update you.

I thinks its set up right. Turn off the header image in the theme.

and don’t add rosamundwo’s code snipit i

Just did the following steps:
Downloaded and copied the file in wordpad and named it header.php. Uploaded it to child theme. Inserted the `#headImage {
display: block;
float: none;
margin: 0 auto;
text-align: center;
width: 100%;
}`
in the style.css sheet in my child theme.
Everything is uploaded but it now looks like there are 2 images. I went to appearance=>customize and there is no header image set…

OK lets check a few things under appearance >? customize

site title and tag line – the display header text box should be unchecked
header image should be no image
background image should be no image

I do see the replacement header in place, and it is responsive. so at least that seems to be working

Hi Michael
can confirm all of the above are unchecked and no images in appearance=>customize in the child theme …