TopBar Tips


Sometimes you find that the dropdown caret symbol is either the wrong color or pointing in the wrong direction for your page structure. 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;