Michael Smith

is this code still in the style.css of the child theme

.site-header .home-link {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-height: 0px;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

hmm… that was not expected. Ok replace the .site-header code you just put in your styles.css child them with the following.

.site-header {
background: url(“#”) no-repeat scroll center top #000;
background:color: #000;
}
if that doesn’t work we need to find out if your site is calling css code from some other place.

Do you have any other css files as part of your chlid? Look for .css as a file extension.

Do you have any other .css files in the parent theme?

check to make sure you don’t have .site-header code in your header.php, or in page.php

OK then add the following to the end of your style.css file in your child theme

.site-header .home-link {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-height: 0px;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

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

and don’t add rosamundwo’s code snipit i

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: http://sandbox.michaelsmithportfolio.com/

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

No worries, happy to help.

Oh and stole your header image and applied to sandbox just to double check things. This solution still works, but it looks like you have a white line in the image you will want to clean up after you get the header fixed.

It doesnt look like the html code in the header.php file was updated correctly. See the snipit below. The code from my site has the added div, but the code from your site does not.

<!-- from Olivia -->
<header id="masthead" class="site-header" role="banner">
			<a class="home-link" href="http://www.oliviaontheriviera.com/" title="OLIVIA ON THE RIVIERA" rel="home">
				<h1 class="site-title">OLIVIA ON THE RIVIERA</h1>
				<h2 class="site-description">Fashion and Lifestyle blog live from the French Riviera</h2>
			</a>

<!-- From sandbox -->
<header id="masthead" class="site-header" role="banner">
<div id="headImage">
<img src="http://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>
			<a class="home-link" href="http://sandbox.michaelsmithportfolio.com/" title="Sandbox" rel="home">
				<h1 class="site-title">Sandbox</h1>
				<h2 class="site-description">Its my playground</h2>
			</a>

I would double check to make sure your child theme is working correctly. You may already have this but here is the link from wordpress.org on how to create a child theme. http://codex.wordpress.org/Child_Themes