need help with custom header with hook and css

[su-ling]

Hi,
I am trying to get my header to look like this:
http://stamfordlandscaping.com/images/header.png
and in smaller screens the responsive look is this:
http://stamfordlandscaping.com/images/smallerHeader.png

I am using the Executive Pro theme. I've changed the functions.php file to show the title and make the header width big enough, but I'm having problems getting the logo image properly aligned. I first tried adding the image as a background image to the class .title-area. That worked great for screen sizes over 1023px, but as the screen size gets smaller the image was sticking to the left (as I had set it with css) while the site title and description were doing their responsive thing (centering).

So now I've added the image with a hook in the function.php file

function addHeaderLogo() {
	?><div class="headerImage">
        <img alt="stamford Landscaping logo" src="http://stamfordlandscaping.com/images/logo_image_90x90.png" width="90" height="90" />
    </div>
	<?php
	
}
add_action ( 'genesis_site_title', 'addHeaderLogo' );

This adds the image after the site-title and I can't figure out how to style it all to look the way I want.

my questions are:
1. Should I go back to just adding the image by css? If so how do I style it to move responsively with the title?
2. If I should stick with using a hook is there a hook to use that puts the image within the header but before the site-title? If there isn't a before site-title hook, how do I style the image where it is now?
3. is there some totally different and better way to do this?

Thanks in advance!

http://stamfordlandscaping.com/wordpress/

[Tony @ AlphaBlossom]

Hello,

If you add a priority to your hook it will place the new Header logo before the main logo, making it much easier to do what you want:

add_action ( 'genesis_site_title', 'addHeaderLogo', 5 );

Adding the "5" will fire this action sooner than the header logo so it will output first.

If you still have issues after this, let me know and I'll be happy to help.

Also, it's good practice to use a unique prefix to your function to avoid potential naming conflicts (abce_addHeaderLogo). If a plugin uses a function named "addHeaderLogo" it will crash your site, and using your unique prefix will really reduce the chance of that happening.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[su-ling]

Tony, thank you! Is there any documentation on that hook priority number thing? I'm wondering what exactly the number 5 does so I can use it well in other situations.

Also, could you help me with a little of the css, specifically the
@media only screen and (max-width: 1023px)

I'd like it to look like this at that screen size:
http://stamfordlandscaping.com/images/smallerHeader.png

Right now the change in the css for that screen size is

.custom_header_image{
	    float: none;
	    margin: 0 auto;
	}

The only solution I can think of to make it look like my screenshot is to wrap the image, site title, and description in a div and style that div for the different screen sizes. But do you know if there is a better way to do it? My solution would require removing the site-title and description in the function.php and then adding it again in a hook that puts it all in a div...I don't know if that's a clean solution or if it would affect SEO.

Thank you so much for your help!

[Tony @ AlphaBlossom]

Hi, glad to help 🙂

I'm not aware of anywhere the Genesis hook priorities are listed...you can find them by finding the function in the Genesis Framework code, or by trying different priorities to figure it out. Here's the brief explanation from the WordPress Codex:

Priority
An optional integer argument used to specify the order in which the functions associated with a particular action are executed (default: 10). Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order added to the action.

For the css, here's what I'd recommend:

1 - Change your .title-area width to 530px (around line 1026 of your theme's style.css file - main rule, not media query). Test it in various browsers to make sure it's wide enough...you might have to go 535px or 540px instead:

.title-area {
    float: left;
    overflow: hidden;
    width: 530px;
}

2 - inside your @1023px media query, remove .title-area from the group that has width="100%" (around line 2206) and add some changes to .title-area:

.content, 
.sidebar-primary,
.sidebar-secondary, 
.site-header .widget-area, 
.wrap {
    width: 100%;
}

.title-area {
    float: none;
    margin: 0 auto;
}

3 - Add float: left to all 3 elements in the .title-area:

.site-header .custom_header_image, 
.site-header .site-title, 
.site-header .site-description {
    float: left;
}

4 - add a new media query for 550px, or change the 500px media query to 550px if it doesn't affect the styles that are in there:

@media only screen and (max-width: 550px) {

    .title-area {
        width: 100%;
    }

    .site-header .custom_header_image, 
    .site-header .site-title, 
    .site-header .site-description {
        float: left;
        padding-left: 0;
        padding-right: 0;
        text-align: center;
        width: 100%;
    }

}

That should get you close (maybe play with top/bottom padding, etc).

Have a great day!

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[su-ling]

Thank you so much for all the help Tony!

That worked for me. I had to make the .custom_header_image margin-bottom be -25px because the site-title has a bunch of space above it that is not padding or margins. It's a google font... maybe it's just sized weird. I played with line-height but that didn't work.

I changed the site-title and site-description font sizes in a few of the media query sizes too.

This was all so helpful as I''m just learning how to work with media queries. (My original expertise was Flash which is becoming obsolete but if you ever need and Actionscript coding let me know! 🙂

[Tony @ AlphaBlossom]

You're very welcome...glad I could help! The site looks great and scales down very nicely!

It can definitely be a bit confusing, but lots of great resources and support to help you!

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Author]

Posts