CLickable Header (Minimum Theme)

Community Forums Forums Design Tips and Tricks CLickable Header (Minimum Theme)

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  nutsandbolts 7 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #88238

    pbjenny
    Member
    Post count: 2

    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/
    #88278

    nutsandbolts
    Moderator
    Post count: 3130

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #88312

    pbjenny
    Member
    Post count: 2

    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 :)

    #88418

    nutsandbolts
    Moderator
    Post count: 3130

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #88427

    pbjenny
    Member
    Post count: 2

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

    #88429

    nutsandbolts
    Moderator
    Post count: 3130

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

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

You must be logged in to reply to this topic.