Modificar color fondo de la barra de menú

Hola,

La mayoria de themes te permite hacerlo, como no indicas que theme usas no podemos orientarte pero lo puedes mirar en el personalizador, esta en apariencia o en la propia pagina de opciones del theme si existiese.

He mirado el theme y yo tampoco veo ninguna opcion, asi que deberas añadir en CSS adicional el css para modificarlo.

Usando el inspector del navegador localiza la seccion del menu y luego ves modificandolo.

Si necesitas mas ayuda comenta que colores y cuando pueda te pongo el CSS.

Hola,

Te pongo casi todo el CSS necesario para editar el menu. Como usa Bootstrap debes modificar varias clases asi que he comentado todos los valores para que solo edites lo que necesites y lo unico que he activado es cambiar el color de fondo del menu.

.navbar-default {
  background-color: #ff00ff;
  /*border-color: #e7e7e7;*/
}
.navbar-default .navbar-brand {
  /*color: #777;*/
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  /*color: #5e5e5e;*/
  /*background-color: transparent;*/
}

.navbar-default .navbar-nav > li > a {
  /*color: #777;*/
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  /*color: #333;*/
  /*background-color: transparent;*/
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  /*color: #555;*/
  /*background-color: #e7e7e7;*/
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  /*color: #ccc;*/
  /*background-color: transparent;*/
}
.navbar-default .navbar-toggle {
  /*border-color: #ddd;*/
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  /*background-color: #ddd;*/
}
.navbar-default .navbar-toggle .icon-bar {
  /*background-color: #888;*/
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  /*border-color: #e7e7e7;*/
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  /*color: #555;*/
  /*background-color: #e7e7e7;*/
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    /*color: #777;*/
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    /*color: #333;*/
    /*background-color: transparent;*/
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    /*color: #555;*/
    /*background-color: #e7e7e7;*/
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    /*color: #ccc;*/
    /*background-color: transparent;*/
  }
}

Lo pegas en el personalizador CSS Adicional y ves modificandolo. cuando quieras usar una propiedad elimina el /* y */ si ves que no se modifica, cambia ; por esto !important; para intentar forzarlo.
Te recominendo que use el inspector para localizar mejor que clase es la que modifica x aspecto.