Pb mise en forme navbar

Bonsoir tout le monde,

Je suis sur le point de terminer un projet, cependant je but sur la navbar mise en place avec de l'aide extérieur.
Le problème survient lorsque je suis en configuration smartphone à l'ouverture du Burger.

J'aimerais que le fond des liens recouvre le contenu de la page et soit de la même couleur que le reste de la navbar. Je posterais bien une capture d'écran pour que ce soit plus parlant mais j'ai un problème pour les importer (si quelqu'un sait comment faire).

Voici le code Html de ma navBar

 <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="index.php">Acceuil</a></li>
              <li class="active"><a href="p2.php">Tarifs</a></li>
              <li class="active"><a href="p3.php">Galerie</a></li>
              <li class="active"><a href="contact-page.php">Contact</a></li> 

Et voici le CSS, que faudrait il ajouter pour obtenir le résultat escompté ?

.navbar-default {
	background-color:#37151e;
	border-color:#37151e;
	border-radius:0px;
    height: 90px;
}

.navbar-default .navbar-nav>li>a {
	color:white;
    padding-top: 35px;
    padding-left: 40px;
    font-size: 25px;
    font-family: "Yellowtail"; 
    font-weight: lighter;
    
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color:white;
}

Merci pour vos futures réponses !

Merci pour les réponses,

voici l'exemple : http://codeply.com/go/w4dGtG4u1J

Je crois avoir compris ce qu'il faut faire, par contre je ne vois pas trop comment le faire :s

anaisG a écrit :
Je crois avoir compris ce qu'il faut faire, par contre je ne vois pas trop comment le faire :s

Display:block sur les liens, comme je l'avais dit. Voici le code, avec quelques arrangements :

.navbar-default {
	background-color: #37151e;
	border-color: #37151e;
	border-radius: 0; /* Pas d'unité ici */ 
	height: 90px; /* Je n'aime pas les pixels mais bon... on ne va pas tout refaire */
}

.navbar-default .navbar-nav a { /* J'ai allégé la sélection */
	display: block; /* Et hop, magique ! */
	padding: 30px 40px; /* j'ai pris une petite liberté avec la déclaration d'origine car le rendu n'était pas top */
	font-size: 25px;
	font-family: "Yellowtail"; 
	font-weight: lighter;
}

:root .navbar-default .navbar-nav li a:focus,
:root .navbar-default .navbar-nav li a:hover { // le :root c'est pour sursélectionner, sinon on peut se contenter de mettre un !important sur la règle
	background-color: #fff;
}

Modifié par Olivier C (09 Nov 2016 - 18:48)