Mega Menu CSS Styling

Hi Guys,

Note: sorry, had some problems with uploading the screenshot..

I’m trying to do a certain styling on my main menu. It used to work before I used the mega menu. I want to have a triangle on top of the dropdown menu (desktop) that points towards the name of the category.
The desired result looks like: . desired result example
link is: https://pasteboard.co/I7bVCot.jpg

However, once I implemented the mega menu, I can’t get this result any more. For your convenience, I have made the ‘triangles’ red now.
And this is the current result:
current result
link is: https://pasteboard.co/I7bWsaf.jpg.

This is not my intention. I need 1 triangle instead of multiple, that points towards the category I selected. In this case: ‘Toepassingen’.

I have used the following code to get the current result:

#top #header #avia-menu .mega_menu_title :before {
  bottom: 100%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: red;
  border-width: 14px;
  left: 50%;
  margin-left: -9px;
	}

I am aware that by selecting the .mega_menu_title in my CSS, I’m selecting all titles and therefore get multiple triangles. However I don’t know how to select the whole DIV to get only one triangle.

Hope to hear from you soon.

• This topic was modified 5 years, 9 months ago by Yourhanger.