La regola che stabilisce il colore di quegli elementi è definita nel file css di bootstrap ed è questa qui:
codice:
.navbar-default .navbar-nav > li > a {
  color: #777;
}
Puoi usare questa stessa identica regola (ovviamente modificando il codice del colore a tuo piacimento) se devi inserirla in un css personalizzato, questa chiaramente andrà a sovrascrivere quella sul file di bootstrap.

Inoltre, anche per il focus, su tali elementi, è definito un colore grigio (più scuro) sul file originale, con questa regola che comprende anche l'hover (il quale viene comunque sovrascritto dal tuo css):
codice:
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    color: #333;
    background-color: transparent;
}
Il focus è lo stato di un elemento attivo dopo che, ad esempio, questo viene cliccato. Per cui al click potresti vedere il testo scuro se non cambi anche questo colore.

Per sovrascrivere tale regola puoi accomunarla con la regola che hai definito per l'hover (come è stato fatto per il css originale)

Il tuo css per l'hover è questo:
codice:
.topnav ul.navbar-nav li a:hover {
   background: rgba(0, 0, 0, 0);
   color: #FECA65;
}
Per cui potrebbe diventare una cosa del genere:
codice:
.navbar-default .navbar-nav > li > a:focus,.topnav ul.navbar-nav li a:hover {
   background: transparent;
   color: #FECA65;
}

PS: ho notato un piccolo errore sul tuo codepen alla riga 13:
codice:
    font-family: "book antiqua",
alla fine di questa riga c'è una virgola ma dovrebbe invece esserci un punto e virgola ";".