force background color for widget same as for menu

I don’t understand what you mean, please describe by using screenshot’s.

In now, the menubar-widgets plugin doesn’t add any CSS or JS to frontend.

I checked your web site, but there isn’t any widgets in the menubar, please add your widgets, I can add some css code for your site. 🙂

Please add this codes to the style.css file of current theme, located under ( wp-content/themes/your-theme/style.css ).

.sub-menu.menubar-widgets {
    background-color: #333;
    padding: 10px;
    width: inherit !important;
    min-width: 200px ;
}
.sub-menu.menubar-widgets li.menubar-widget {
    padding: 10px 0;
}
.sub-menu.menubar-widgets li.menubar-widget:first-child {
    padding-top: 0;
}
.sub-menu.menubar-widgets li.menubar-widget ul {
    display: block !important;
    position: relative !important;
    left: inherit !important;
    box-shadow: none !important;
}
.sub-menu.menubar-widgets .menubar-widget-title {
    font-size: 16px;
    color: #ccc;
}
.sub-menu.menubar-widgets li.menubar-widget ul > li > div {
    padding: 0 10px;
    font-size: 11px;
}
.sub-menu.menubar-widgets li.menubar-widget .bbpsw-label {
	display: none;
}

.sub-menu.menubar-widgets li.menubar-widget .bbpsw-search-field {
    border: none;
    padding: 11px 15px;
    width: 100px;
    float: left !important;
    background-color: white;
}
.sub-menu.menubar-widgets li.menubar-widget .eddsw-search-submit {
    background-color: #7a7a7a;
    border: none;
    padding: 10px ;
    float: left;
    color: #eee;
    cursor: pointer;
}

.sub-menu.menubar-widgets li.menubar-widget .eddsw-search-submit:hover {
    background-color: #8a8a8a;
}
.sub-menu.menubar-widgets li.menubar-widget .eddsw-search-submit:active {
    background-color: #7a7a7a;
}

I hope this be helpful for you. 🙂
.

Your welcome. 🙂