Support » Themes and Templates » Sizing a logo that replaced the header title

Viewing 12 replies - 1 through 12 (of 12 total)
  • Using the id in your CSS will allow you to target just that image:

    #branding {...}

    To link it just wrap your image in anchor tags:

    <a href="url"><img....> </a>

    I think I still must be missing something in the code. What you said makes perfect sense but its not working. I tried a few different variations and at one point it changed the size of the sliding header images but the logo still stayed the same…

    Oh sorry, I used a class syntax and it should have been id (# not period) in the CSS:

    #branding img#site-logo-image {...}

    But the anchor tags need to go in the HTML in your header.php file not the CSS file – ONLY CSS ever goes in that file.

    Thanks, like i said I’m still learning the whole process.
    Is it possible that something in my header.php is reading the logo and slider header as the same thing? Maybe i used the wrong technique to insert the logo.
    Sorry I’m so dense about all this.

    <body <?php body_class(); ?>>
    <div id="page" class="hfeed">
    	<header id="branding" role="banner">
    			<hgroup><img src="" alt=""  id="site-logo-image" />
                <a href=""><> </a>

    Yeah, that’s kind of a mess – but no problem, everyone here is learning, including volunteers and mods who help out :).

    Try this in place of what you have starting with the hgroup tag:

    <hgroup><a href=""><img src="" alt="logo" id="site-logo-image" /></a>

    That is definitely a step in the right direction. Before you gave me that last code I had edited it down to this:

    				 <img src="" alt=""  id="site-logo-image" / </span>

    Which made the header back to its normal size and the logo a little smaller and centered.
    Your code made the header image a little smaller, the logo smaller than that and made it clickable.

    Do you think I should just edit the logo in Photoshop and make the original file smaller? then all I would have to do is make sure it was aligned to the left…just thinking out loud.

    Looks like it is getting styled by this CSS:

    #branding img {
        display: block;
        height: auto;
        width: 100%;

    so to override that, add the width to the more specific style in your child style.css:

    #branding img#site-logo-image {
        width: 300px;

    To move it to the left add this too:

    #branding hgroup {
        margin: 0;

    Perfect!!!! I’ve been working on this for 2 days. Thank you so much!
    (I feel a little bit smarter now)

    You’re welcome and glad you learned a bunch too! That’s what we always want to see happen here. If you can mark this resolved, it helps keep the forums a bit neater and tidier and easier for future searches to find solved issues.

    Thanks again 🙂

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Sizing a logo that replaced the header title’ is closed to new replies.