Executive clickable logo header – followed tutorial, not working

[Kipley]

Hi - I am trying to add a clickable logo header to the executive theme and am having trouble getting it to work. Here is the site:

http://69.195.124.97/~melistt5/spinnakerlaw/

First I uploaded a header image that is 1140 X 100px. This worked, but I could not get the logo to be clickable. I notice there is a tiny clickable area on the left side of the header, but not when I would hover over the logo area.

Then I looked for tutorials on how to upload a clickable logo, and found this:

How to Add a Logo to the Header

I also found information on this forum that I should delete the "Add support for custom header" code in the functions php.

Here are the steps I have taken:

1. Uploaded logo.png to both genesis & executive images folders

2. Deleted this in functions php:

/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array(
'width' => 1140,
'height' => 100
) );

3. Changed theme header settings from dynamic text to image logo

4. Added this to style.css:

.header-image #title a {
    background: url( 'images/logo.png' ) no-repeat;
}

5. Changed Image header partial width from 25% to 350px

Having done all this, I am not seeing the logo in the header, and I notice that the footer is now not displaying properly when I look at it in Safari. The widgets are stacked on top of each other instead of next to each other.

Can anyone help me sort out what's going wrong and figure out how to add a clickable logo in the header of the executive theme?

Thanks in advance,
Kipley

http://69.195.124.97/~melistt5/spinnakerlaw/

[RobCubbon]

Hello, Kipley, you haven't put the logo in the correct place. It should be here:

http://69.195.124.97/~melistt5/spinnakerlaw/wp-content/themes/executive/images/logo.png

it shouldn't go in the /genesis/images/ folder it should go in the child themes /images/ folder.

Check you've named it correctly, as well : "logo.png"

I can't recreate the Safari issue you speak of, sorry.

---

Rob Cubbon

[Kipley]

Thank you, Rob - I see that I had named the logo "Logo" with a capital "L" instead of lowercase. I appreciate your assistance

There is one more problem I'm having - I see the logo appearing, but now the alignment of the menu is off - the header right navigation menu drops down and there is a big space.

I tried adjusting the width of the "image header - partial width" back to 25% width as in the default, which moved the menu back to it's correct position, but then I couldn't see the logo.

The logo is 350 x 90 pixels and I want to see the logo on the left side of the header, and the custom menu in the right side of the header, both aligned.

Do you have any suggestions?

Thanks again for your help.

Best wishes,
Kipley

[emasai]

The following is too wide #header .widget-area - reduce the width and it will move up.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Kipley]

Thank you! That worked. I am so grateful for the assistance here.

I have one final question - and forgive me if this is obvious, I am new to css. Is there a way to make only the header background white so that it matches the logo, but the page background remains the same blue that it is?

Many thanks for the replies!

Best wishes,
Kipley

[RobCubbon]

Hi Kipley,

In style CSS line 193. Add background: #fff; to #header.

🙂

---

Rob Cubbon

[Kipley]

Fantastic! Thank you so much - that did it!

Kipley

[Author]

Posts