Bonjour,

J'ai un soucis que j'essaye de résoudre depuis 2 heures maintenant et sans réussite:

Sur mobile, mon menu bootstrap se déroule sans le background et je ne sais pas pourquoi cela arrive 

Photo: 


navbar.php (en mode include dans l'index) : 

<nav class="navbar navbar-light fixed-top navbar-expand-xl " style="background-color: #ffffff;">
    <div class="social-left">
    <a href="https://twitter.com/WeblancerFr" class="social-link" target="_blank" title="Twitter"><div class="twitter"></div></a>
    <a href="https://www.instagram.com/weblancer.fr/" class="social-link" target="_blank" title="Instagram"><div class="instagram"></div></a>
    </div>
  <button class="navbar-toggler navbar-center" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav navbar-center">
      <li class="nav-item active">
        <a class="nav-link" href="index.php" title="Accueil">Accueil</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="index.php#services" title="Services">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="realisations.php" title="Réalisations">Réalisations</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="index.php#contact" title="Contact">Contact</a>
      </li>
    </ul>
  </div>
    <div class="social-right">
    <a href="https://www.facebook.com/weblancer.fr" class="social-link" target="_blank" title="Facebook"><div class="facebook"></div></a>
    <a href="https://www.linkedin.com/in/kuba-kosior-6841b9176/" class="social-link" target="_blank" title="Linkedin"><div class="linkedin"></div></a>
    </div>
</nav>

dans l'index j'ai bien les librairies du bootstrap : 

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

css perso: 

.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

.navbar-nav li a {
    font-family: 'Cinzel', serif;
    font-size: 26px;
    color: #387CDD !important;
    transition: color .6s;
}

.navbar {
    padding-top: 1.75px;
    padding-bottom: 1.75px;
    height: 80px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    box-shadow: 0 0px 0px rgba(0,0,0,0.15);
    transition-delay: 0.2s;
  }

J'ai essayé de mettre le height en auto sur mobile mais la navbar disparaît presque entièrement, quand le menu se déroule, le background se déroule aussi mais une fois le menu complètement à découvert le background disparaît : 

Bonjour,

C'est étrange moi j'ai testé via les inspecteur chrome, firefox, ie, je n'obtiens pas ce problème.

Mais avant ca, des le départ le positionnement de ta liste vis-à-vis du bouton pose problème.

Bonjour Exen,

Merci de me répondre.

As tu utilisé mon code pour le test?

Qu'est ce qui ne va pas avec le positionement? J'ai essayé de supprimer les réseaux sociaux puis le navbar-center et j'ai toujours le même problème :/

Oui j'ai utilisé ton code.

Après pour le positionnement de accueil par rapport a ton icone burger c'est décalé et sa mange un peut dessus.

Mais après si ca te va pourquoi pas.

Hmm, ca veut dire que le problème vient d'ailleurs, mais j'ai vraiment aucune idée d'où :/ 

PS: Désolé de répondre si tardivement j'étais pas mal occupé 

J'ai trouvé le problème, c'était le centrage qui était pas bon. La position de la navbar-center devait être en relative et ca a fix le problème.

Par contre maintenant, j'en ai un autre: 

Les liens des medias sociaux de gauche mangent les liens du menu. Quelqu'un aurait une idée comment arranger ca? Je pensai à mettre tout les réseaux sociaux en bas avec le FB et IN quand le menu se déroule mais j'ai aucune idée comment.  

-
Edité par KubaKosior 20 mai 2019 à 16:19:40