Sujet Précédent Sujet Suivant

Navbar: menu déroulant

Fermé
depaninf Messages postés 124 Date d'inscription mercredi 31 octobre 2007 Statut Membre Dernière intervention 6 mars 2019 - Modifié le 5 nov. 2018 à 22:34
Hydr0s Messages postés 1678 Date d'inscription lundi 24 janvier 2011 Statut Membre Dernière intervention 24 août 2022 - 11 juin 2018 à 20:24
Bonjour,

J'ai acheté un template à modifier qui a déjà une navbar qui me plait. Seulement elle n'a pas de menu déroulant pour mes sous-menus.

Quelqu'un peut-il m'aider non pas à créer un menu déroulant mais à modifier celui existant svp ?

Mon code HTML est celui-ci: 

</head>
<body>
<div class="preloader">
 <div class="preloader-body"><i class="wf-preloader"><i class="wf-preloader__inner"></i></i></div>
</div>
<div class="page">
 <header>
  <nav
    class="navbar navbar-default bootsnav navbar-fixed-top header-light bg-transparent nav-box-width white-link navbar-mobile">
   <div class="container nav-header-container">
    <div class="row">
     <div class="col-md-2 col-xs-5"><a class="logo" href="index.html" title="eai-consulting"><img class="logo-dark"               alt=""><img
       class="logo-light default" src="images/logo-white.png" alt=""></a></div>
       
     <div class="col-md-7 col-xs-2 width-auto pull-right accordion-menu">
      <button class="navbar-toggle collapsed pull-right" type="button" data-toggle="collapse"
          data-target="#navbar-collapse-toggle-1"><span class="sr-only">toggle navigation</span><span
        class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      <div class="navbar-collapse collapse pull-right" id="navbar-collapse-toggle-1">
       <ul class="nav navbar-nav navbar-left panel-group no-margin text-font-sec text-bold">
       
        <li><a class="inner-link" href="#home" title="Présentation de la Société EAI Consult">Accueil</a></li>
        <li><a class="inner-link" href="#about" title="Qui sommes-nous ?">À propos</a></li>
        <li><a class="inner-link" href="#people" title="Les hommes">Les hommes</a></li>
        <li><a class="inner-link" href="#people" title="Nos prestations">Prestations</a>
        <ul>
     <li> <a href="comprendre.html" title="Création de Sites Internet">Création de Sites Internet</a> </li>
                    <li> <a href="lexique" title="Création de logiciels/software">Création de logiciels/software</a> </li>
                    <li> <a href="glossaire" title="Méthodologie de Business">Méthodologie de Business</a> </li>
     <li> <a href="comprendre.html" title="Marketing: mise en place de campagne de télémarketing">Marketing: mise en place de campagne de télémarketing</a> </li>
                    <li> <a href="lexique" title="Identité visuelle: création de supports papiers et autres">Identité visuelle: création de supports papiers et autres</a> </li>
                    <li> <a href="glossaire" title="Téléphonie">Téléphonie</a> </li>
     <li> <a href="comprendre.html" title="Pour nous comprendre">Comprendre</a> </li>
                    <li> <a href="lexique" title="Lexique des mots informatiques">Lexique</a> </li>
                    <li> <a href="glossaire" title="Glossaire des mots courants">Glossaire 2017</a> </li>
     </ul>
</li>

                         <li><a class="inner-link" href="#contacts" title="Nos clients">Clients</a></li>
      <li><a class="inner-link" href="#contacts" title="Contactez-nous">Contact</a></li>
      <li><a class="inner-link" href="index-english.html" title="English version"><img src="images/english2.jpg" alt=""></a></li>
</li>

       </ul>
      </div>
     </div>
    </div>
   </div>
  </nav>
 </header>


Mon css est ici:
eai-consult.com/css/style.css

Comment puis-je modifier ma feuille de style pour que le menu déroulant apparaisse sans modifier le style du menu ?

Merci beaucoup pour votre aide :)



A voir également:
  • Navbar: menu déroulant
  • Navbar generator - Télécharger - Divers Web & Internet

4 réponses

Réponse 1 / 4
Hydr0s Messages postés 1678 Date d'inscription lundi 24 janvier 2011 Statut Membre Dernière intervention 24 août 2022 672
26 mai 2018 à 17:31
Salut,

A priori, ton template est basé sur du bootstrap 3.0, pas 4, la syntaxe est différente, et tu as donc accès à toutes les fonctionnalités et plugins. Essaye avec ceci : https://getbootstrap.com/docs/3.3/components/#dropdowns

Le concepteur du template pourra surement te renseigné, surtout si le template est payant...
0
depaninf Messages postés 124 Date d'inscription mercredi 31 octobre 2007 Statut Membre Dernière intervention 6 mars 2019 13
26 mai 2018 à 17:42
Merci Hydr0s, mais c'est du JavaScript du coup ?
J'ai émis un ticket hier auprès du concepteur mais pas de réponse pour l'instant...
0
Hydr0s Messages postés 1678 Date d'inscription lundi 24 janvier 2011 Statut Membre Dernière intervention 24 août 2022 672
26 mai 2018 à 17:48
Il faut juste modifier le code html et rajouter les class au bon endroit. Le code css et le javascript devrait déjà être inclus
0
depaninf Messages postés 124 Date d'inscription mercredi 31 octobre 2007 Statut Membre Dernière intervention 6 mars 2019 13
26 mai 2018 à 18:23
J'ai testé mais ça modifie les boutons du menu...
0
Réponse 2 / 4
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
27 mai 2018 à 14:59
il te faut en premier travailler sur une basse saine, passe ton css ici :
https://jigsaw.w3.org/css-validator/
"Résultats de la validation W3C CSS de TextArea (CSS niveau 3 + SVG)
Désolé ! Les erreurs suivantes ont été trouvées : (30)
Avertissements (4442)"
.... ensuite ....
0
depaninf Messages postés 124 Date d'inscription mercredi 31 octobre 2007 Statut Membre Dernière intervention 6 mars 2019 13
30 mai 2018 à 18:36
Oui je sais bg62, mais le template que j'ai acheté a un code assez pourri....
Toujours est-il que le menu est sympa mais sans bouton et sans sous menus
J'aimerais garder le même style de menu mais en ajoutant des sous-menus
Qu'en penses tu ?
0
Réponse 3 / 4
depaninf Messages postés 124 Date d'inscription mercredi 31 octobre 2007 Statut Membre Dernière intervention 6 mars 2019 13
Modifié le 5 nov. 2018 à 22:35
Bonjour les gars,

J'ai réussi à mettre mon dropdown, enfin. Mais il ne fonctionne que sur les ordis, pas sur les smartphones grrr

J'ai fait ce code là: 

<li class="dropdown simple-dropdown">
      <a class="inner-link" href="prestations.html" title="Les activités dans lesquelles nous intervenons">Prestations</a>
      <i class="fa fa-angle-down dropdown-toggle" data-toggle="dropdown" aria-hidden="true"></i>
      <!-- Dropdown menu -->
      <ul class="dropdown-menu" role="menu">
       <!-- Dropdown menu item-->
  
     <li> <a href="sites-internet.html" title="Création de Sites Internet">Création de Sites Internet</a> </li>
              <li> <a href="creation-software.html" title="Création de logiciels/software">Création de logiciels/software</a> </li>
            </ul>
        </li>


Je ne sais pas si vous pouvez regarder sur le site et m'apporter votre aide...? Merci :) 
eai-consult.com
0
Hydr0s Messages postés 1678 Date d'inscription lundi 24 janvier 2011 Statut Membre Dernière intervention 24 août 2022 672
9 juin 2018 à 11:34
Je sèche total, c'est une ancienne version de bootstrap... En bidouillant un peu, on peut arriver à ce que le dropdown fonctionne. Sinon, 
btn
à la place du 
<a>
mais il faut refaire tout le css derrière... 
 <li class="dropdown simple-dropdown">
 <a class="inner-link dropdown-toggle" data-toggle="dropdown" title="Les activités dans lesquelles nous intervenons" href="#">Prestations</a>
0
depaninf Messages postés 124 Date d'inscription mercredi 31 octobre 2007 Statut Membre Dernière intervention 6 mars 2019 13
10 juin 2018 à 16:19
Mais non c'est la version 4 de bootstrap, c'est la dernière il me semble.
0
Réponse 4 / 4
depaninf Messages postés 124 Date d'inscription mercredi 31 octobre 2007 Statut Membre Dernière intervention 6 mars 2019 13
Modifié le 5 nov. 2018 à 22:33
En plus j'ai un autre problème, sur les Iphones le site ne s'affiche pas entièrement...juste le header Grrrr

Tu as une solution Hydr0s ?

0
Hydr0s Messages postés 1678 Date d'inscription lundi 24 janvier 2011 Statut Membre Dernière intervention 24 août 2022 672
Modifié le 9 juin 2018 à 13:13
Sur mon iphone 7/Safari, le site s'affiche correctement !?

Autre suggestion pour le menu déroulant, le supprimer et faire en sorte de tout rentrer sur une page avec des liens à partir de la première page.
0
depaninf Messages postés 124 Date d'inscription mercredi 31 octobre 2007 Statut Membre Dernière intervention 6 mars 2019 13
9 juin 2018 à 13:29
Ah bon tout s'affiche ?? Étrange ça ! Sur Safari sur PC ça ne s'affiche pas correctement, tout est décalé... et sur l'Iphone d'un copain je n'ai que le Header.

Pour le menu déroulant je n'ai pas compris ta dernière suggestion. Tu veux dire mettre tous les liens sur la page ? Ça décale tout sur les PC après
0
depaninf Messages postés 124 Date d'inscription mercredi 31 octobre 2007 Statut Membre Dernière intervention 6 mars 2019 13
9 juin 2018 à 13:30
Regarde sur PageSpeed Insights l'affichage n'est pas bon non plus.... 
https://developers.google.com/speed/pagespeed/insights/?hl=fr&url=http%3A%2F%2Fwww.eai-consult.com%2F
0
depaninf Messages postés 124 Date d'inscription mercredi 31 octobre 2007 Statut Membre Dernière intervention 6 mars 2019 13 > Hydr0s Messages postés 1678 Date d'inscription lundi 24 janvier 2011 Statut Membre Dernière intervention 24 août 2022
9 juin 2018 à 17:28
Je viens de comprendre que le site fonctionne sur Iphone 7 (Safari) mais pas sur Iphone 6....
0
depaninf Messages postés 124 Date d'inscription mercredi 31 octobre 2007 Statut Membre Dernière intervention 6 mars 2019 13 > Hydr0s Messages postés 1678 Date d'inscription lundi 24 janvier 2011 Statut Membre Dernière intervention 24 août 2022
9 juin 2018 à 17:28
Regarde sur PageSpeed Insights l'affichage n'est pas bon non plus.... 
https://developers.google.com/speed/pagespeed/insights/?hl=fr&url=http%3A%2F%2Fwww.eai-consult.com%2F
0

Discussions similaires

Carousel et navbar qui ne fonctionnent pas BOOTSTRAP 4
aqwxszedcvfrtgbnhyuj -
anas -

11 réponses