Partage

menu de navigations

9 février 2018 à 11:53:06

Bonjour tout le monde j'espère que vous aller bien alors actuellement je fait un site et j'aimerai vous demander de m'aidez car je vous explique j'ai fait un menu de navigations avec bootstrap j'aimerai que le menu de navigations passe comme ci  

il le fait très bien mais que l'orsque je réduit le navigateur a 765px 

moi j'aimerai que il se mettent en menu burger a 1050px car entre 765px et 1050px ça m'affiche un truc comme ça tout moche

voila le code html 

<header>
      <!-- Fixed navbar -->
      <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="index.php">Crownbackend.com</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="index.php">Accueil <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Connexion</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Inscriptions</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">vidéo</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Qui suis je ?</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">s4 league</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">black ops 3</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Ma chaine YouTube</a>
            </li>
          </ul>
          
        </div>
      </nav>
    </header>



-
Edité par CrownBackend 9 février 2018 à 11:54:41

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
9 février 2018 à 13:51:31

Salut c'est plus le CSS qu'il nous faut pour ton problème sur tout la partie responsive avec les media query...
9 février 2018 à 14:30:15

Il faut modifier les fichiers CSS de bootstrap et trouver le média query qui correspond, tu auras juste à changer sa max-width
9 février 2018 à 15:11:24

salut dit moi comment je peu chercher la ligne ? 

ça c'est la balise ou je cherche mon code bootstrap comment tu fait pour chercher la ligne exact 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
9 février 2018 à 18:10:49

salut je l'est bien trouver mais comment la modifier vue que c'est appelle extérieur dans ma feuille de style comment je peux changer on ma parler de !important ? c'est possible ?
12 février 2018 à 9:24:45

Alors oui, tu met directement ton style dans TON css avec une important, exemple:

Si bootstrap à un h2 color blue et que tu met un 

h2{

color:red !important;

}

Alors le h2 seras rouge :) 

Sinon tu peux directement modifier le fichiers css de bootstrap si tu le télécharge et met le link du fichier local :)

12 février 2018 à 9:43:02

Bonjour,

Oui utiliser !important est possible mais c'est particulièrement dégueulasse comme méthode (pardon pour la vulgarité mais c'est vrai).

Et en fait tu n'en a pas besoin. Dans ton head, tu dois appeler le CSS de Bootsrap puis ton CSS personnel. Il suffit ensuite d'appliquer ta propriété CSS sur le même élément (regarde dans ton navigateur pour voir précisément comme cet élément est ciblé par Bootstrap). Ton CSS étant plus bas dans ton code c'est lui qui aura la priorité et qui s'appliquera sur l'élément. C'est une méthode très courante qui s’appelle "overrider une propriété". 

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
12 février 2018 à 10:55:13

Bonjour,

Je voudrais rajouter qu'il y a mieux que Bootstrap. Je l'ai essayé et il n'est pas aussi compatible qu'on le croit... Il suffit de faire le Responsive Design Mode pour s'en rendre compte...

Harry Cover
12 février 2018 à 15:13:53

Harry tu parles de quoi en mieux? Foundation?

Bootstrap est populaire car c'est Twitter, rien d'autre.

15 février 2018 à 17:04:53

Florent6001 le mieux de composer entièrement le code soi-même
Harry Cover

menu de navigations

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown