z-index not working to move my logo to the front

[noslenwerd]

Would like my logo to overlap the navigation on this page, but its falling behind it at the present time.

Any tips on how to fix?

http://74.54.218.67/~mykool/

Thanks!

[Paul O'B]

Hi,

Your nav is z-index:100 so make the site logo 101.

#site-logo {
    font: 600 26px/100% Signika,Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 10px;
    z-index: 101;
}

[Paul O'B]

Of course the only problem with that is that the left part of the nav will be unusable as the bottom of the logo will now sit on top of it.

The only real solution is to slice the logo and include the lower part of the logo as a separate image in the checkout list item.

e.g.

#main-nav li.page-item-7{
background:url(http://74.54.218.67/~mykool/wp-content/themes/shopdock/themify/img.php?src=http://74.54.218.67/~mykool/wp-content/themes/shopdock/uploads/logo/websitelogo22.png&w=239&h=120) no-repeat -55px -95px
}

[dresden_phoenix]

It seems you have reset your header items to position:static. For z-index to work on an element, that element must have relative, absolute, or fixed position.

Hope that helps.


--UPDATE.. Paul just beat me, (as I was sifting through your style sheets) I would try his answer first... as he is far wiser than I. I would also consider what he is saying about how the logo will block access to PART of your nav.

A suggestion: Use the logo, additionally, as a bg image for the UL , and use background-position to move it up so that it matches with the missing part from your actual logo.

[designforce24]

I have tested your website and suggest to change the z-index:900 its looking fine now.

#site-logo {
font: 600 26px/100% Signika,Arial,Helvetica,sans-serif;
margin: 0;
padding: 0;
position: absolute;
top: 10px;
z-index: 900;
}

[Paul O'B]

I have tested your website and suggest to change the z-index:900 its looking fine now.

#site-logo {
font: 600 26px/100% Signika,Arial,Helvetica,sans-serif;
margin: 0;
padding: 0;
position: absolute;
top: 10px;
z-index: 900;
}

Unfortunately, that won't be a viable solution because as mentioned above the nav will not work.

The solution I gave in post 3 is the only option here