TopBar Tips
Here is the arrow or caret that we are trying to alter....
....and here's how to change it.
The CSS selector we will be dealing with is as follows.top-bar-section .has-dropdown > a::after{
/*Your Code Here*/
}
The caret is made using a CSS trick whereby you have a very small element with a four sided border where three of the sides are transparent. Because the corners of such a border join at a mitre, so long as the length is of the same order as the width of the border then the result is a triangle. Simple really.
Place one of the following lines of code between the curly braces dependent on the direction of the arrow that you require. You can change the colour by adjusting the RGB color values. Note that the fourth value is the opacity - defaulting to 0.4 which gives a 40% opacity.
Down:
border-color:rgba(255,255,255,0.4) transparent transparent transparent
Left:
border-color:transparent rgba(255,255,255,0.4) transparent transparent
Up:
border-color:transparent transparent rgba(255,255,255,0.4) transparent
Right:
border-color:transparent transparent transparent rgba(255,255,255,0.4)
Off:
border-color:transparent;