CODEWITHSUNDEEP
htmlcsswordpressmenu
Jeweetzelf
Jeweetzelf

Reputation: 65

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/

Upvotes: 0

Views: 459

Answers (1)

Paul
Paul

Reputation: 633

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:

Upvotes: 1

Related Questions