Responsive header not working

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%;
}

still looks strange: this is the code :
`/*
Theme Name: Suits Child
Theme URI: https://www.themeweaver.net/demo/suits-child/
Description: Suits Child Theme
Author: Theme Weaver
Author URI: https://www.themeweaver.net/
Template: suits
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: suits
*/

@import url(“../suits/style.css”);

/* =Theme customization starts here
————————————————————– */
#headImage {
display: block;
float: none;
margin: 0 auto;
text-align: center;
width: 100%;
}
.site-header .home-link {
display: block;
margin: 0 auto;
max-width: 100%;
min-height: 0px;
text-align: center;
text-decoration: none;
width: 100%;
}

Yup, working this one step at a time.

You still have a background image in your header, from what i see i think it is getting added via css. Take a look at line 45 of your styles.css and see if you find the following code

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

if you do, delete it. If you do not then add the following to the end of styles.css in your child theme.

.site-header {
background-color: #000;
}

should i delete this in the parent theme header css?

didnt find that code in the style.css sheet.
added
.site-header {
background-color: #000;
}
to my child style.css
i don’t see any difference….

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

Hi Michael,
1. I did the step above didnt change anything. What I did do however is modify the code you sent me for the header php:
<img src=”https://www.oliviaontheriviera.com/wp-content/uploads/2014/06/oliviaontheriviera-header-180×1200.jpg&#8221; alt=”SandboxHeader.jpg” width=”960″ height=”180″ class=”alignnone size-full wp-image-26″ />
the bold part I changed to alt=oliviaontheriviera-header-180×1200.jpg and width=1200 and not 960
Looks better now but there is a big white blank below the header.
2. There are no other css files in the child or parent theme.
3. No .site-header code in header.php or page.php
4. Like I said before, there is a custom header php file in the parent theme could this be overriding? I did find the following line in it:

.site-header {
			background: url(<?php header_image(); ?>) no-repeat scroll top;
		}

OK i think your right and the custom-header.php file is inserting the background. Basicly that line is saying to insert the header image into the header of the site if one exists.

Try checking bot the parent and child theme for a header image. if you find an active image in either appearance > header or appearance > background turn them off in both themes.

Hi Michael,
there were in fact images in the main theme which ive removed. Now the child theme is active, the header is ok but there is a big white space under, any idea what that may be? And still white bits on the side.
Also, just tried viewing on my smartphone and it still displays 2 headers…

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%;
}

i have:

#headImage {
    display: block;
    float: none;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}
.site-header {
background: url("#") no-repeat scroll center top #000;
background:color: #000;
}

Lets try this make sure all the header and or background images in both the parent and child are off. I still see the background image. If they are off then replace the custom css i had you install with the following.

It basically the same thing i have had you put in place before but i added !important to the end of a couple of the important lines to give the changes a higher priority.

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

.site-header {
    background: url("#") no-repeat scroll center top #000 !important;
}

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

woohoo result! ??
now displays correctly on pc and on mobile but there is a white line on bottom and left side, any idea where that is coming from?

Yup, i know exactly where that is from. The white line is part of the actual image file. there is no way to remove it without replacing the header.

use the link below to download a fixed header ??

https://www.dropbox.com/s/ckump8gy5b2smd3/oliviaontheriviera-header-180×1200.jpg

You will need to upload this new image to your media library, then replace the “https://www.oliviaontheriviera.com/wp-content/uploads/2014/06/oliviaontheriviera-header-180×1200.jpg&#8221; line of code from the headImage div we put in your header.php file with whatever the new link is.

FINALLY WE DID IT! all works now.
Thank you so much for your help Michael. Not sure after all that what was causing the issue exactly but its all good now, working on both desktop and mobile device.
Thank you again!!!