• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Sample Child Theme Header CSS

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Sample Child Theme Header CSS

This topic is: not resolved

Tagged: css, header logo, sample child theme

  • This topic has 3 replies, 3 voices, and was last updated 12 years, 9 months ago by selym.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 20, 2013 at 7:59 pm #21854
    selym
    Member

    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.

    http://bit.ly/UJVRjn

    February 21, 2013 at 8:06 am #21947
    cehwitham
    Participant

    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 }
    add_action('genesis_site_title','add_website_logo');

    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: cehwitham.com

    February 21, 2013 at 8:15 am #21950
    Brad Dalton
    Participant

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

    Tutorials for StudioPress Themes.

    March 7, 2013 at 11:11 am #24800
    selym
    Member

    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 (http://bit.ly/ZiMEvn) 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.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble