Can I make an invisible Floating Div over navigation background image to make header clickable, wordpress toolbox theme?

http://66.147.244.96/~safeedu2/wordpress/

Hello, I now have a clickable box (to the left) in the white area that will link to my homepage, but I want it to float on top of the “book logo”, so it’s not a white strip at the top of my design. Is this possible? Here is my new CSS:

/* =Header
-------------------------------------------------------------- */

#site-title {
    margin: 0;
    z-index: 6;
    width: 160px;
    width: 130px;
}

#site-title a {
    display: block;
    text-indent:-9999px;
}

#site-description {
    display: none;
    padding: 0px;
    margin: 0px;
}

Related posts

Leave a Reply

1 comment

  1. You should read What No One Told You About Z-Index

    You have two problems:

    • It’s useless to use a huge z-index if that element belongs to an stacking context below another.
    • If you want an empty element to be visible, you must give them dimensions (e.g. height: 100%;width: 100%;) and be aware that if it is an inline element by default, you also need display: block; (or inline-block), or it will ignore the dimensions.

    You can add

    #site-title {
        margin: 0;
        z-index: 6; /* because #access has z-index:5 */
    }
    
    #site-title a {
        display: block;
        height: 100%;
        width: 100%;
    }