Mega menu bullets different colors

Hey Stefan,
You could use css like this adjusting the color to suit the menu item IDs:

<pre><code>.header_color #menu-item-331 > a > .avia-bullet {
    border-color: blue;
}
.header_color #menu-item-388 > a > .avia-bullet {
    border-color: green;
}
.header_color #menu-item-332 > a > .avia-bullet {
    border-color: yellow;
}

This css changes the menu arrows for three items to blue, green, and yellow.
Try to modal this for your other items, this is the expected results for the above css:

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
To change the menu arrows please see our documentation: Replace mega menu arrows with custom icon
So for your situation, to have the bar icon and to have it the color red, please try this css:

#top .avia-bullet {
  border: none;
    padding:0;
    margin: 0 5px 0 0!important;    
}
#top .avia-bullet:before {
    content: "\e819";
    font-family: 'entypo-fontello'; 
    color: red;
    font-size:11px;
    line-height:1em;
    left:-3px;
}

This will change the above solution to have specific bars a different color to this css:

.header_color #menu-item-331 > a > .avia-bullet:before {
    color: blue;
}
.header_color #menu-item-388 > a > .avia-bullet:before {
    color: green;
}
.header_color #menu-item-332 > a > .avia-bullet:before {
    color: yellow;
}

The expected results:

Best regards,
Mike