SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    #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. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  5. #5
    Non-Member
    Join Date
    Aug 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by designforce24 View Post
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •