Aide sur création de menu css sans JS

Bonjours à tous,

je viens vers vous après une très longue absence derrière le clavier pour DEV.

J'aimerais reproduire se type de menu si possible:
https://www.lacity.org/for-residents

Celui avec le haut Bleu et la ligne en dessous blanc.
Par exemple : Support for RESIDENTS

Je ne dois pas utilisé de JS, car ce dernier ne sera pas pris en charge sur le suport où le site sera placé. En revanche, je peux prendre du CSS3 sans soucis, avec HTML5.
Les utilisateurs final n'auront pas accès à la source, donc, pas de précaution particulière à prendre.

Je vous remercie beaucoup de votre aide.

Très cordialement.


Mon code actuel avec Bootstrap:

  <nav class="nav nav-pills flex-column flex-sm-row fixed-top bg-dark padding">
	<a class="flex-sm-fill text-sm-center nav-link text-success h4" href="/residents">Pour les résidents</a>
	<a class="flex-sm-fill text-sm-center nav-link text-success h4" href="/emploie">Espace enploi</a>
	<a class="flex-sm-fill text-sm-center nav-link text-success h4" href="/gouvernements">Votre gouvernement</a>
  </nav>

Bonjour,

Comme dans la page d'exemple il va falloir répartir le texte dans des <span> afin de pouvoir le styler différemment :

<span>Pour les</span> <span>résidents</span>

Ensuite, il faut intervenir sur le style grâce au ciblage de ce nouvelles balises, en gros (pas testé) :

nav a {
    text-align: center;
}

nav a > :first-child {
    display: block;
    color: #95daff;
    font-style: italic;
    text-transform: lowercase;
}

nav a > :last-child {
    color: #fff;
    font-size: .75rem;
    text-transform: uppercase;
}

C'est nikel, ça fonctionne pour la mise en place des couleurs.

Comment puis je aligner les deux textes de manière à avoir le même effet que le site officiel?

https://i22.servimg.com/u/f22/15/02/42/80/site10.png

Savez vous quel police est utilisé sur le site officiel au niveau de se fameux menu?
Je la trouve très classe et simple et j'aime bien l'effet avec.

Il s'agit de la police "Lato". Si vous voulez coller les items sur la gauche de leur div parente il suffit de supprimer la règle de centrage que j'avais mise en début du code proposé.