Announcement

Collapse
No announcement yet.

Product Flags overlay dropdown menu

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Product Flags overlay dropdown menu

    If you go to this category page and then click on the Ornaments menu tab, notice how all of the "NEW" tabs overlay the the drop down menu? The first thing I went and checked were the Z-Indexes of each. Granted I may have missed something but the best I can tell the menu is

    Code:
    .navigation-set li ul {z-index: 999;}
    and the flag

    Code:
    .flag::before {z-index: 10;}
    .flag::after {z-index: 11;}
    Shouldn't the Z-Index of the menu be "hiding" these?

    FWIW - the Z-Index of the Quick View button is

    Code:
    .quick-view {z-index: 15;}
    I'm wondering if the Z-Index for the Flags is needed at all because if I comment out the Z-Indexes, it displays as expected. Odd...


    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    Bump, bump, bump, BUMP, crash...

    Awww come on now, nobody?
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    Comment


      #3
      Leslie,

      Technically the Quick View is not being hidden by the z-index but rather by the CSS. When you hover over the Quick View while the navigation is down the Quick View will appear.

      The issue is the z-index that is on the .navigation-bar is set to a value of 1 so that is deciding index. You can increase that value or set your flags to 0 to fix the issue.
      Nicholas Adkins
      Technical Training Specialist / Miva, Inc.
      [email protected]
      https://www.miva.com/mivalearn

      Comment


        #4
        Thanks Nick. That helped me to finally fix it.
        Leslie Kirk
        Miva Certified Developer
        Miva Merchant Specialist since 1997
        Previously of Webs Your Way
        (aka Leslie Nord leslienord)

        Email me: [email protected]
        www.lesliekirk.com

        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

        Comment


          #5
          also looks like the sizing control needs a bit of love. for example


          border-width: 0px 0px 85px 85px;

          instead of


          border-width: 0px 0px 75px 75px;

          (that was on Win Chrome, may need to verify on IOS for best compremise.
          Bruce Golub
          Phosphor Media - "Your Success is our Business"

          Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
          phosphormedia.com

          Comment

          Working...
          X