paulwpxp on "CSS not responding to changes"

I have an element in my css for a fontawesome character that I would like to not display. No matter what combo of things, and even using the !important rule, I cannot get the element to not show.

I am using the findscool theme and here is the css included in the template for the element.

#nav-wrapper .menu > li.menu-item-has-children > a:after { font-family: FontAwesome; content: "f107"; margin-left:6px; color:#fff; font-size:14px;
}

here is my website

Site link plz ?

Do you mean the slash line on hover?

If that's so, use this

.menu-item a.menu-image-hovered:hover img.hovered-image { opacity: 0 !important;
}

satvikinfotech: it is at the bottom of the post :)

paulwpxp: The line hover was a personal addition but you mentioning it as a potential mistake made me remove it, thank you for the unintentional design feedback.

The item I mean to remove is the down arrow character next to the categories and follow buttons. I tried the opacity trick you posted just case in the css mentioned above but it didn't effect the character.

The DOWN arrow appears only in mobile (small screen situation) and only when the RIGHT arrow on parent item is clicked.

If we removed the down arrow, users can not click to close the child menu items (because there is no symbol or sign to click on).

To remove down arrow, use this code.

.slicknav_open .slicknav_arrow { display: none; }