Missing logo in genesis child theme

[webgirl20]

Hello,
Can't seem to work out why the header logo is not showing here.

.site-header  {
        padding: 10px 0;
	padding: 1rem 0;
	box-sizing: border-box;
	display: block;
	color:#000;
}

.header-image .title-area {
  	background: url('wp-content/uploads/2016/04/CB-whiteLogo_blackBg.gif') no-repeat;
	width: 750px;
  	height: 49px;
}

Thanks for any suggestions

[Victor Font]

There's quite a few things going here. First, your images aren't loading because you aren't calling them correctly. When you load background images in style.css using relative URLs, they are relative to the location of style.css, which is in the themes/christine directory. What you are actually doing when you call url('wp-content/uploads/2016/04/CB-whiteLogo_blackBg.gif') is attempting to load an image from

http://www.christinebec.com/staging/wp-content/themes/christine/wp-content/uploads/2016/04/CB-whiteLogo_blackBg.gif

This is a non-existent directory. Either move the image to a directory under the child theme directory or use a fully qualified URL as the url parameter.

Second, once the image displays, you'll see it displayed twice. You somehow managed to create two copies of the header.

Third, unless you purposefully chose not to wrap the header in the link to your site, you should really be placing the background image in this code:

.header-image .site-title > a {
    background: url('images/blackLogo.png') no-repeat;
    min-height: 117px;
    width: 100%;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[webgirl20]

I have removed one of the site-headers, since there was two copies.
I have also added header option under appearance > header but for some strange reason the header logo is still not showing. I am using Firefox browser & when I use the inspector (tools > web developer >inspector) & hover over the site-header the height is 42px & I can't seem to remove it. Here is a link to it
This is what I added in the functions.php file

//* Add support for custom header
	add_theme_support( 'custom-header', array(
		'flex-width'      => true,
		'width'           => 750,
		'flex-height'     => true,
		'height'          => 149,
		'header-selector' => '.site-title a',
	) );

and in the css

.title-area {
	width: 750px;
}
.header-image .site-title > a {
    min-height: 149px;

[Victor Font]

You don't have a closing brace in the .header-image .site-title > a class.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[webgirl20]

In my style.css I already had the closing bracket, just forgot to add in the post.
Still can' work out why the header logo is not showing
cheers

[Victor Font]

I just looked at your style sheet and took a closer look at your source code. You do not have a header-image class defined in your HTML source code. You also have some broken CSS.

.site-title a,
.site-title a:hover {
	margin:;
}

Margin has no value so it beaks the CSS.

When you create a class like .header-image .site-title > a, the broswer applies this to the site-title a element within the header-image class. If you don't have the header-image class defined in the HTML, this code never executes.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[webgirl20]

When you have appearance > header, is it still necessary to add the background url under

.header-image .site-title > a.

As I added a header image under appearance > header. Are you able to show an example of your explanation above. Am more a designer rather than a developer.
Thanks

[Victor Font]

Add this to your site-title a. I just tested it on your site with inspect element:

display: block;
height: 149px;
max-width: 750px;

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[webgirl20]

Thank you for help

[Author]

Posts