Sample Child Theme Header CSS

Community Forums Forums General Discussion Sample Child Theme Header CSS

This topic is: not resolved

This topic contains 3 replies, has 3 voices, and was last updated by  selym 2 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #21854


    I’ve had a tough time with this sample child theme header thus far. :(

    I’m wondering if someone could help me out with some css. I try to mess around as much as I can, but css truly is my achilles heel of hacking around. I’ve inspected the element in Chrome and tried firebug in Firefox, trying different changes to no avail.

    I’m trying to adjust my header image position to be level with the search widget and make the entire image a home link. Any help or a push in the right direction would be sincerely appreciated.



    Remove your header image that you’ve added in.

    Then go into your child heme folder under /wp-admin/themes/ and upload your logo into the images folder.

    Next edit the functions.php file in your child theme folder and add the following code to the bottom of it:

    /** Add Logo to Header */

    remove_action( 'genesis_site_title', 'genesis_seo_site_title' );
    function add_website_logo() { ?>
    <a href="" title="Home" id="logo">
    <img src="/images/logo.png" alt="Logo" />

    <?php }

    You’ll need to change the filename to whatever your logo is called. This will insert the image into the header as an image rather than a background image and wrap it in a link to the homepage.

    Let me know how you get on.

    Twitter: cehwitham Web:



    Reduce the height of the header in your child themes functions.php file

    // Add support for custom header
    add_theme_support( ‘genesis-custom-header’, array(
    	‘width’ => 1152,
    	‘height’ => 120
    ) );

    Make the same height in your Header style.css file under the Header section

    Crop the bottom of your header image if needed.

    You could also change the padding-bottom properties value using pixels i.e 10px for the widget in your child themes style.css file:

    #header {
        border-bottom: 2px solid #1E1E1E;
        min-height: 60px;
        overflow: hidden;
        padding-bottom: 2rem;



    I wanted to thank you both for taking the time to help, and to apologize for the delay in my response.

    Unfortunately I still haven’t figured this out. On the original site I mentioned in this thread, I still cannot get the logo to show up following¬†cehwitham‘s directions. However, I tried it on another similar test domain with this sample child theme (¬†and it worked. I’m still useless trying to figure out css, but I was able to center the logo on the second domain by simply resizing the logo itself multiple times. I also noticed on both domains something now intermittently messes with search in the header widget. (When I type one letter, it just refreshes)

    I’ll keep plugging away, troubleshooting, testing new things, etc. Thanks again for the earlier replies.

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

You must be logged in to reply to this topic.