Ho creato un template in bootstrap che vi mostro qui sotto e vorrei abbellirlo un poco. Le migliorie che vorrei apportare sono le seguenti:
1.Quando clicco sul menu a discesa il tag con l'hover del mouse diventa grigio e al clic assume un background di colore blu elettrico. Come posso modificare questi due colori senza commettere errori?
2.Esiste un plugin di jquery che permette di tornare su quando sono in fondo alla pagina?
3.Mi consigliate un font funzionale? Ho provato Roboto ma presenta degli errori. Mi piace molto il font che usa Apple sul suo sito. Sapete dirmi come si chiama e da dove posso scaricarlo?
4.Come si aggiungono le icone su Bootstrap nel menu e nel layout e dove trovo una ricca dotazione di esse?
5.Consigli per rendere più carina la pagina?
ciao

codice:
<!DOCTYPE html>
<html lang="it">
<head>

<!-- Meta indispensabile per Bootstrap e per tutti i siti responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Libreria Bootstrap (CSS) -->
<link href="librerie/bootstrap.min.css" rel="stylesheet">
<!-- Menu Bootstrap (CSS) -->
<link href="librerie/scrolling-nav.css" rel="stylesheet">

</head>
  
<body id="page-top">

    <!-- Menu di navigazione -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
      <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">Esercitazione 1</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#home">Home e login</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#password">Password</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#">Percorso</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#">Problema svolto</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Altri menu</a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                <a class="dropdown-item" href="#">Menu 1</a>
                <a class="dropdown-item" href="#">Menu 2</a>
                <a class="dropdown-item" href="#">Menu 2</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <header class="bg-secondary text-white">
      <div class="container text-center">
        <h1>Esercitazione 1</h1>
        <p class="lead">Applicazione web per la gestione di coordinate spaziotemporali</p>
        <p class="lead">Progetto Maven (linguaggio lato server: Java | linguaggio lato client: Javascript)</p>
      </div>
    </header>
    
    <!-- Pagina di login -->
    <section id="home">
      <div class="container text-justify">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <!-- Contenuto pagina -->

            <h2>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</h2>
            <p class="lead">Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>

          </div>
        </div>
      </div>
    </section>
    
    <!-- Password per accedere all'applicazione e testare il software -->
    <section id="password" class="bg-light">
      <div class="container text-justify">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <!-- Contenuto pagina -->

            <h2>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</h2>
            <p class="lead">Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>

          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="py-5 bg-dark">
      <div class="container text-justify">
        <p class="m-0 text-center text-white">Bla bla bla bla bla bla bla bla bla bla bla</p>
      </div>
    </footer>

    <!-- Libreria jQuery (JavaScript) -->
    <script src="librerie/jquery.min.js"></script>
    <!-- Libreria Bootstrap (JavaScript) -->
    <script src="librerie/bootstrap.bundle.min.js"></script>
    <!-- Plugin per far funzionare le ancore in Bootstrap (JavaScript) -->
    <script src="librerie/jquery.easing.min.js"></script>
    <!-- Menu Bootstrap (JavaScript) -->
    <script src="librerie/scrolling-nav.js"></script>

    
    
  </body>
</html>