Modifica colore testo menù - hover menu header - navbar-right - <ul><il>

[Speendy]

Ciao a tutti, ho sempre trovato quello cercavo su questo forum ma questa volta sono veramente in difficoltà.

sto lavorando ad un sito web responsive e nel creare l'header con il menù di navigazione a destra della home page non riesco a cambiare il colore del testo con effetto hover. Le parole del menu quali home, contact e about sono in grigio, passando con il mouse sopra cambiano di colore . Vorrei sostituire con il css il grigio con un altro colore ma non riesco a capire su quale classe o attributo agire. il codice html è il seguente:

<nav class="navbar navbar-default navbar-fixed-top topnav " role="navigation">
        <div class="container topnav">
          <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span> </button>
   <a class="navbar-brand topnav">Imagination means nothing without doing.</a>
   </div>
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
      <li><a  href="#home">Home</li></a>
<li>
   <a href="#contact">contact</a>
 </li>
    <li>
  <a href="#about">about</a>
  </li>
  <li>
 <a href="#home">home</a>
                    </li>
                </ul>
            </div>
           
        </div>

Grazie a tutti

[KillerWorm]

Ciao e benvenuto.
Quel codice non è sufficiente a capire come risolvere. Se puoi postare un link alla pagina pubblica sarebbe più semplice darti aiuto.

[Speendy]

Lavoro su codepen, posso mettere i link?

[KillerWorm]

Sì, vediamo

[Speendy]

ecco qui http://codepen.io/Ipa26/pen/bEJqqE

[KillerWorm]

La regola che stabilisce il colore di quegli elementi è definita nel file css di bootstrap ed è questa qui:

.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):

.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:

.topnav ul.navbar-nav li a:hover {
   background: rgba(0, 0, 0, 0);
   color: #FECA65;
}

Per cui potrebbe diventare una cosa del genere:

.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:

    font-family: "book antiqua",

alla fine di questa riga c'è una virgola ma dovrebbe invece esserci un punto e virgola ";".

[Speendy]

Grazie, non potevo avere miglior risposta. Quanto prima apporterò le correzioni e l'integrazione del codice, e ti dirò.

[Speendy]

Scusate il ritardo. Il codice da te suggerito funziona alla grande.