Executive clickable logo header – followed tutorial, not working

Community Forums Forums General Discussion Executive clickable logo header – followed tutorial, not working

This topic is: resolved

This topic contains 6 replies, has 3 voices, and was last updated by  Kipley 7 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #62805

    Kipley
    Participant
    Post count: 8

    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:

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

    • This topic was modified 7 months ago by  Kipley.
    • This topic was modified 7 months ago by  Kipley.
    http://69.195.124.97/~melistt5/spinnakerlaw/
    #62823

    RobCubbon
    Participant
    Post count: 98

    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.


    • This reply was modified 7 months ago by  RobCubbon.
    • This reply was modified 7 months ago by  RobCubbon.
    #62843

    Kipley
    Participant
    Post count: 8

    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

    #62852

    emasai
    Participant
    Post count: 482

    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

    #62860

    Kipley
    Participant
    Post count: 8

    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

    #62871

    RobCubbon
    Participant
    Post count: 98

    Hi Kipley,

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


    #62895

    Kipley
    Participant
    Post count: 8

    Fantastic! Thank you so much – that did it!

    Kipley

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.