Z-Index issue in drop down menus

With some of our themes in the PinnacleCart you may find issues when trying to use the top layer Categories. The Categories in the drop down hover tend to float behind other Categories, which is typically caused by the z-index. This Article will give you some insight and help on how to fix this issue. 

Applies to Version(s): 3.7.15r2 - 3.8.2r2 (or Current)

What is the cause for the issue?

Note: This is most common for the LA Threads Template

Some of our themes have an issue when you're trying 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 just have one row, they have many. 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 is showing an image where the Category drops in behind the rest of the Categories:

 

What is the z-index?

Note: You can learn CSS with free tools online, w3schools and codecademy

The Definition of a z-index is; 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 will need

So 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 for what we're looking for? Well the way I like to do it is to use FireFox and get an 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 "Inspect Element". This will bring up a window at the bottom of our 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 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 of what is above 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?

Note: We're only trying to fix the z-index issue, so we need to write custom CSS to correct this

Now the problem becomes with our current themes 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>Refresh Page. 

z-index: auto; will remove the z-index from the <li>.  .drop-down-menu a already has a z-index of 5, so we can leave that alone.  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 make it change 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 the Categories no longer are 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

Was this article helpful?
0 out of 0 found this helpful