Hi!
I think I may have found a solution for the CSS arrow, at least it seemingly works on my end.
To make it work:
1. Make sure to remove the custom CSS you added for the arrow, it will conflict with this solution. From the browser inspector, this should be removed:
[html]#ajaxsearchprores1_1.vertical:before
{
content: ”;
position: absolute;
border-style: solid;
border-width: 0 9px 9px;
border-color: #cccccc transparent;
display: block;
width: 0;
z-index: 0;
top: -12px;
left: 21px;
}[/html]
2. Add this custom CSS instead:
[html].asp_r {
overflow: inherit !important;
}
.asp_r:after, .asp_r:before {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
z-index: 1;
}
.asp_r:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 8px;
margin-left: -8px;
}
.asp_r:before {
border-color: rgba(204, 204, 204, 0);
border-bottom-color: #ccc;
border-width: 12px;
margin-left: -12px;
}[/html]
3. Clear your cache if you use any, then reload the page. It should look like this: https://i.imgur.com/xdrJgQJ.png
Let me know how it goes. I’m not yet sure about the icons though, will try to figure out something for that as well.