How to reduce the Home link size in my header? - php

Question

I'm playing with html and css to make the home link of my header covering only the left half of the header size. Each time I'm resizing the Home Link, it changes my header size. I thought it was because they're in the same div so I put the
<img class="header-logo"...</>
above the
<a class="home-link"...</a>
and put it in its own div and gave a brand new id to the logo. Unfortunately that made my header wider which I don't want to. How would you proceed to reduce the homelink size?
I'm using Wordpress and its twentythirteen default theme.
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img class="header-logo" src="http://localhost/test/wp-content/themes/twentythirteen-child/resources/logo_big2_v2.png" />
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</a>
Here is a sample of the related CSS:
.site-header {
margin:10px auto 0 auto;
max-width:980px;
padding:0;
background-size: 980px auto;
}
.site-header .home-link {
min-height: 50px;
}
.header-logo {
max-width:60%;
display:block;
padding-top:3px;
padding-bottom:5px;
position:relative;
}

Answer 1

header logo,title and description are all nested inside the .home-link. So changing the homelinks will have impact on the child classes.You might try the code below where you can style individual classes without affecting the other classes.
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"></a>
<img class="header-logo" src="http://localhost/test/wp-content/themes/twentythirteen-child/resources/logo_big2_v2.png" />
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

Answer 2

Why do you put so many classes in your html : why not
<header id="masthead" class="site-header" role="banner">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="http://localhost/test/wp-content/themes/twentythirteen-child/resources/logo_big2_v2.png" />
<h1><?php bloginfo( 'name' ); ?></h1>
<h2><?php bloginfo( 'description' ); ?></h2>
</a>
then
/* css */
.site-header {
margin:10px auto 0 auto;
/* max-width:980px; not needed : the visitor's choice...*/
padding:0;
background-size: 980px auto;
}
.site-header > a {
min-height: 50px;
width : 50%; /* site header link will cover only
a half of the header, the containing div */
}
.site-header > img {
max-width:60%;
display:block;
padding-top:3px;
padding-bottom:5px;
position:relative;
}

Answer 3

This is what I used in the end:
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img class="header-logo" src="http://localhost/test/wp-content/themes/twentythirteen-child/resources/logo_big2_v2.png" /></a>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
and
.site-header .home-link {
min-height: 169px;
max-width:50%;
position:static;
left:-250px;
}
Now everything seems OK, but not exactly, the responsiveness is broken and the menu is not resizing at low screen resolution because of the min-height: 169px; CSS property that I need otherwise the logo is out of the header section. One problem solved, here comes a new one. Edit: I still haven't figured out a solution for this.