Hey Again,

Could you elaborate with a screenshot which element in the OffCanvas Menu you wish to change?.

Thanks 

Hi Dan,

Please try these out:

body #header-outer, body[data-header-color="dark"] #header-outer {
    background-color: #5aa1d8;
}
#header-outer #top nav > ul > li > a, #header-outer .slide-out-widget-area-toggle a i.label, #header-outer:not(.transparent) #top #logo, #header-outer #top .span_9 > .slide-out-widget-area-toggle i, #header-outer #top .sf-sub-indicator i, body[data-header-color="custom"].ascend #boxed #header-outer .cart-menu .cart-icon-wrap i, #header-outer #top nav ul #nectar-user-account a span, #header-outer #top #toggle-nav i, .material #header-outer:not([data-permanent-transparent="1"]) .mobile-search .icon-salient-search, #header-outer:not([data-permanent-transparent="1"]) .mobile-user-account .icon-salient-m-user, #header-outer:not([data-permanent-transparent="1"]) .mobile-search .icon-salient-search, #header-outer #top #mobile-cart-link i, #header-outer .cart-menu .cart-icon-wrap .icon-salient-cart, body[data-header-format="left-header"] #header-outer #social-in-menu a, #header-outer #top nav ul #search-btn a span, #search-outer #search input[type="text"], #search-outer #search #close a span, body.ascend #search-outer #search #close a span, body.ascend #search-outer #search input[type="text"], .material #search-outer #search .span_12 span, .style_slide_in_click .total, .style_slide_in_click .total strong, .nectar-slide-in-cart.style_slide_in_click h4, .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart, .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart .cart_list.woocommerce-mini-cart .mini_cart_item a, .style_slide_in_click .woocommerce-mini-cart__empty-message h3 {
    color: #ffffff!important;
}
#header-outer #top .slide-out-widget-area-toggle a .lines:after, #header-outer #top .slide-out-widget-area-toggle a .lines:before, #header-outer #top .slide-out-widget-area-toggle a .lines-button:after, body.material.mobile #header-outer.transparent:not([data-permanent-transparent="1"]) header .slide-out-widget-area-toggle a .close-line, body.material.mobile #header-outer:not([data-permanent-transparent="1"]) header .slide-out-widget-area-toggle a .close-line, #search-outer .close-wrap .close-line, #header-outer:not(.transparent) #top .slide-out-widget-area-toggle .close-line, .nectar-slide-in-cart.style_slide_in_click .close-cart .close-line, .nectar-ajax-search-results h4 a:before {
    background-color: #ffffff;
}

Thanks.

Please send in your admin login credentials so that we may look into this further.

Please check it out

Hey Again,

That particular field is not referring to the Top Navigation Header and colors can only be change via Custom CSS.

Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

div#header-outer:not(.transparent).side-widget-open #top #logo.no-image {
    color: #fff !important;
}
div#header-outer:not(.transparent).side-widget-open {
    background-color: #5AA1D8 !important;
}
#header-outer.side-widget-open #top .slide-out-widget-area-toggle a .lines:after, #header-outer.side-widget-open #top .slide-out-widget-area-toggle a .lines:before {
    background-color: #fff !important;
}

Thanks