PeterPrakker PeterPrakker - 14 days ago 5
CSS Question

Triangle in sub-menu overlaps main menu-item

I added a decorative triangle using a :before on the sub-menu class. However, it covers its own main menu-item.

The website is not live yet, but I hope my screenshots will make the situation clear enough.




enter image description here



This is what the menu looks like. It's a WordPress installation, with a basic navigation, nothing custom except the triangle.




enter image description here



This is what I see when I hover on the :before inside of Chrome's inspector. It covers the bottom half of the main menu-item, making the bottom half unclickable.




enter image description here



This is what it looks like when I give it a fixed height of 10px. As you can see the triangle is centered, but the highlighted part begins above it.




Here's my code:

menu-item

position: relative;
float: left;
z-index: 999999;


sub-menu

text-align: center;
width: auto;
color: #78A22F;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;


sub-menu:before

content: "\f0d8";
font-family: FontAwesome;
font-size: 40px;
position: absolute;
top: -36px;
left: 0;
width: 100%;
color: #78A22F;
line-height: 0px;
z-index: 2;


Does anyone have a fix or an alternative way to be able to use this triangle?

EDIT:
Here's a jsFiddle: https://jsfiddle.net/48omajxx/1/

Answer

CSS

.sub-menu:before {
    /* Your other css properties */
    pointer-events:none;
}

Note If there is a click event listener on the element. It will respect the pointer-events value and does not fire.

Interesting articles about pointer events: