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

HTML & CSS
1

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!

2

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;
[B]    z-index: 101;[/B]
}
3

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.:slight_smile:

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
}
4

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. :slight_smile: 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.

5

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;
}

6

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

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