CODEWITHSUNDEEP
phpcsswordpress
michaelw90
michaelw90

Reputation: 533

Wordpress Logo Image Not Always Clickable

I was really unsure how to phrase this problem as it's something I've never encountered before.

My wordpress logo image which is set as a background using css is really buggy when hovering over it. Sometimes I can click it and sometimes I can't. Is this becuase I set the image in css and used text-indent to remove the standard text or is it something else?

Here's the live link. Try hovering over the logo to see excactly what I'm talking about.

I'm using a custom function in my functions.php to print out the logo and menu as seen here:

/**
*   Prints out an ir-anchor with the site-title.
*
*/
function sircon_logo($echo = true) {
$htmlLogo = '';

if (get_bloginfo('name')) {
    $htmlLogo    = '<a';
    $htmlLogo   .= ' id="site-title"';
    $htmlLogo   .= ' class="ir"';
    $htmlLogo   .= ' href="'    . get_bloginfo('url') . '"';
    $htmlLogo   .= ' rel="home">';
    $htmlLogo   .= get_bloginfo('name');
    $htmlLogo   .= '</a>';
}

if($echo) echo $htmlLogo;
else return $htmlLogo;
}

I call it in my header.php using this:

<?php sircon_logo(); ?>

And this is my styles:

/* image replace */
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}

/* logo */
#site-title {
    position: absolute;
    display: block;
    top: 25px; left: 15px;
    width: 157px; height: 64px;
    background-repeat: none;
    background-image: url('style/logo.png');
}
#site-title h1 {
    margin: 0;
}
#site-slogan {
    display: none;  
}
@media (min-width: 500px) {
    #site-slogan {
        display: none;
        width: 320px;
        margin: 0 auto;
        color: #fff;
        font-size: 26px;
        font-style: italic;
        line-height: 1.1;
        letter-spacing: -1px;
        text-align: center;
        padding: 14px 0 0 30px;
    }
}
@media (min-width: 760px) {
    #site-slogan {
        display: none;
        width: auto;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 10px; right: 10px;
    }
}

Upvotes: 0

Views: 102

Answers (3)

Krunal Panchal
Krunal Panchal

Reputation: 788

Here are 2 solutions for your issue

Solution 1

#site-title {
z-index: 500;
}

Solution 2

#main-menu {
left: 220px;
right: 0;
width: auto;
}

Hope this helps you :)

Upvotes: 0

Prem Anand
Prem Anand

Reputation: 1496

The Reason is the nav bar is overlapping the logo. So Apply z-index to the logo

#site-title {
z-index:300;
}

Upvotes: 2

damian
damian

Reputation: 5444

Set a z-index for your logo:

#site-title {
    z-index: 500;
}

For further information check out this

Upvotes: 1

Related Questions