Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML/CSS - logo link that spans entire header
    primarykey
    data
    text
    <p>I am having a bit of a fail with a header I am trying to edit on a wordpress template. Basically, I have a logo image which I have positioned in the center of the header. I want this logo to act as a link for the home page. I have managed to do this, but at the moment, the entire width of the header acts as a link, where as I only want the link to encompass the image (i.e. only be the dimensions of the image). I am not sure why this is, I know I will be doing something silly, but trial and error isnt getting me anywhere fast.</p> <p>Any help would be greatly appreciated.</p> <p>Here is the html/php</p> <pre><code>&lt;!-- BEGIN #header --&gt; &lt;div id="header"&gt; &lt;!-- BEGIN .row --&gt; &lt;div class="row"&gt; &lt;!-- BEGIN .sixteen columns --&gt; &lt;div class="sixteen columns"&gt; &lt;?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) { ?&gt; &lt;h1 id="custom-header"&gt; &lt;a href="&lt;?php echo home_url(); ?&gt;/" title="Home"&gt; &lt;img src="&lt;?php header_image(); ?&gt;" height="&lt;?php echo get_custom_header()-&gt;height; ?&gt;" width="&lt;?php echo get_custom_header()-&gt;width; ?&gt;" alt="&lt;?php bloginfo('name'); ?&gt;" /&gt; &lt;/a&gt; &lt;?php bloginfo( 'name' ); ?&gt;&lt;/h1&gt; &lt;?php } ?&gt; &lt;!-- END .sixteen columns --&gt; &lt;/div&gt; &lt;!-- END .row --&gt; &lt;/div&gt; &lt;!-- BEGIN .row --&gt; &lt;div class="row"&gt; ...... </code></pre> <p>CSS: </p> <pre><code>#header { line-height: 0; margin: 0px; position: relative; z-index: 99; } #custom-header { display: block; padding: 0px; font-size: 0; text-indent: -999em; line-height: 0; margin:0px; padding: 0px; overflow: hidden; z-index: 8; } #custom-header img { display:block; margin: 0px auto 0px; height: auto; text-align: center; padding: 0px; vertical-align: bottom; } .row { width: 100%; margin: 0 auto; } .row .sixteen { width: 100%; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload