CLickable Header (Minimum Theme)

[pbjenny]

Hello! I'm working on a site for a client and she requested that her logo link to her site's homepage. When I was initially designing the cite I just coded the image for the header within the stylesheet

/*
Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
background: url('http://69.195.124.74/~reikiand/wp-content/uploads/2014/01/LOGOFINAL.png') no-repeat;
margin: 0 auto;
opacity:
min-height: 94px;
width: 100%;
overflow: hidden;
}

But am not sure how to make this clickable. I tried using the Genesis Simple Header plugin, however, it still displays the coded version of the header within the stylesheet, and when I delete the URL from the stylesheet, the header area becomes blank.

Any help in terms of how to make the header clickable through CSS, or how to have the Genesis simple header plugin overwrite the stylesheet would be greatly appreciated.

THANK YOU!

http://69.195.124.74/~reikiand/

[nutsandbolts]

Instead of setting your image as the background for .site-header, try it as the background for .site-title a - you'll likely need to adjust quite a bit of the CSS for .site-title a and .title-area but it should make it link to the site homepage.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[pbjenny]

Thanks so much for your response, Nutsandbolts! Not quite sure I'm following your recommendation... any tips for how to adjust the code?

THANK YOU 🙂

[nutsandbolts]

I'm having a hard time figuring out what has been done since there are so many customizations in the stylesheet.

Minimum Pro normally allows for a header image uploaded via Appearance > Header, does it not? If so, it would be far easier to change the function in functions.php to allow your logo's size, upload the image there, then change the stylesheet to reflect those sizes. Right now I don't know what to suggest because so many of the style rules have been altered.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[pbjenny]

Thanks for your help! How might I go about changing the function in function.php ??

[nutsandbolts]

Look for the function that allows the custom header:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 320,
	'height'          => 60,
	'header-selector' => '.site-title a',
	'header-text'     => false
) );

And alter the width and height to match your logo image size. Then you'll need to change the CSS for .site-title a so that the width matches your function.

This will also require some changes to the media queries if you need the logo to be responsive. There are tons of tutorials out there for Minimum Pro and Genesis logos in general. Here's one that may help: http://www.carriedils.com/add-logo-genesis-theme/

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Author]

Posts