February 2, 2014 at 4:51 pm #88238
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
background: url(‘http://18.104.22.168/~reikiand/wp-content/uploads/2014/01/LOGOFINAL.png’) no-repeat;
margin: 0 auto;
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://22.214.171.124/~reikiand/February 2, 2014 at 9:48 pm #88278
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
.title-areabut it should make it link to the site homepage.
February 3, 2014 at 5:31 am #88312
Thanks so much for your response, Nutsandbolts! Not quite sure I’m following your recommendation… any tips for how to adjust the code?
THANK YOUFebruary 3, 2014 at 4:23 pm #88418
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.
February 3, 2014 at 4:53 pm #88427
Thanks for your help! How might I go about changing the function in function.php ??February 3, 2014 at 5:01 pm #88429
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 aso 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/
You must be logged in to reply to this topic.