How to Resolve z-index Issue in Drop-Down Menus

You may find issues with some of our themes in PinnacleCart when trying to use the top layer categories. The categories you'll find in the drop-down hover tend to float behind other categories, typically caused by the z-index. 

This article will give you some insight and help you on how to fix this issue. 

Applies to Version(s): 3.7.15r2 - 3.8.0 series

In this article, you will learn:

What is the cause for the issue?

What is z-index?

How do I find the z-index in the CSS?

How do I fix the z-index issue?

What is the cause for the issue?

Some of our themes have an issue when you try to use the top-level categories that go across the top of your site. This was initially intended only for use of one row of categories, but many of our customers don't have one row. So when this goes outside the design of the template, it tends to cause some issues with the z-index, forcing Categories above, when dropping down to go behind other categories. 

For example, below shows an image where the Category drops in behind the rest of the Categories:

What is z-index?

The z-index property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one. 

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. 

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

How do I find the z-index in the CSS?

Note: Refer to this article for any advanced assistance you need

To break it down, z-index is part of the CSS or Cascading Style Sheets in your website. It's a style sheet language used for describing the presentation of a document written in a markup language.

Now that we know what CSS is, how do we find the z-index of what we're looking for? Well, you can start by using Mozilla FireFox and get the addon called Firebug. This tool makes it easier to find what you're looking for and has many features to help you analyze your site while looking in a live view.

For the example above, we used LA Threads as this seems to be the most common theme having this problem. Pull your site up from the front end. Once there, you will want to find the exact area on your site that is having the issue, right-click and select "Inspect Element". This will bring up a window at the bottom of the screen that will look like this:

As you can see, I've highlighted a few areas and made some comments. The box on the Left is your HTML, and when clicking through, it will change the Style Sheet in the Right Box.

The box on your Right is the CSS or Style Sheets where we can see the CSS for where we have clicked on.

Here is the area in Firebug that shows the line of HTML where the current issue is:

Now on the right-hand side is the element that gives us the CSS containing the z-index, we can change and play with this here and not actually make live changes on the site. 

Now we can see the CSS that controls the drop-down. Our goal here is to change this so that the drop-down menu will layer over the top and not behind. 

How do I fix the z-index issue?

Now the problem is, changing that CSS above to 0 doesn't fix the issue, due to how the theme was designed:

.drop-down-menu a {
    display: block;

    position: relative;
    z-index: 0;

}

In order to actually fix this, we will need to use the following CSS:

.drop-down-menu li {z-index: auto;}
.drop-down-menu ul {z-index: 6;}

Add that to the bottom of the stylesheet or in your Cart Designer> Advanced Tools> Edit Custom CSS> Save then refresh the page. 

z-index: auto; will remove the z-index from the <li>  drop down menu and already has a z-index of 5, so we can leave that as is.  Adding the z-index of 6 to the child <ul> will make it appear on top of the lower '5'.  The reason you couldn't change it previously was due to the z-index on the <li>. Child elements can't have a higher z-index than their parents.

Now if we check our site on the front end again after a hard refresh (CTRL+F5), you can see that the categories are no longer hiding behind other Categories:

Links to Related Articles

None at this time.

If you didn't get your question answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support.