Hi Lacey

That's possible with some CSS. The CSS will target the icon boxes by order and change the icon color. So, for example, if you add or remove a icon box the colors doesn't match anymore and the CSS need to be changed.

/* Address Icon Box */
.header .widget-icon-box:nth-child(1) .fa { color: red; }

/* Phone Icon Box */
.header .widget-icon-box:nth-child(2) .fa { color: red; }

/* Get a Quote Icon Box */
.header .widget-icon-box:nth-child(3) .fa { color: green; }

/* Yelp Icon Box */
.header .widget-icon-box:nth-child(4) .fa { color: red; }

/* Facebook Icon Box */
.header .widget-icon-box:nth-child(5) .fa { color: blue; }

/* YouTube Icon Box */
.header .widget-icon-box:nth-child(6) .fa { color: red; }

You can copy/paste this, only need to change the color value to your own custom needs.

You can use the following CSS for that (only change the background-color value.

@media (min-width: 992px) { .main-navigation li a::before { background-color: #46722b; } }

You're welcome!

I forgot the !important, excuse me. Please try this one:

@media (min-width: 992px) { .main-navigation li a::before { background-color: #46722b!important; } }

Hi,

You can remove the dots with the following CSS line:

.main-navigation li a::before { display: none!important; }