Navbar: menu déroulant [Fermé]

Messages postés
124
Date d'inscription
mercredi 31 octobre 2007
Statut
Membre
Dernière intervention
6 mars 2019
-
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 :)



Afficher la suite 

4 réponses

Messages postés
1677
Date d'inscription
lundi 24 janvier 2011
Statut
Membre
Dernière intervention
12 octobre 2019
312
0
Merci
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...
depaninf
Messages postés
124
Date d'inscription
mercredi 31 octobre 2007
Statut
Membre
Dernière intervention
6 mars 2019
13 -
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...
Hydr0s
Messages postés
1677
Date d'inscription
lundi 24 janvier 2011
Statut
Membre
Dernière intervention
12 octobre 2019
312 -
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
depaninf
Messages postés
124
Date d'inscription
mercredi 31 octobre 2007
Statut
Membre
Dernière intervention
6 mars 2019
13 -
J'ai testé mais ça modifie les boutons du menu...
Messages postés
23282
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
20 octobre 2019
1762
0
Merci
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 ....
depaninf
Messages postés
124
Date d'inscription
mercredi 31 octobre 2007
Statut
Membre
Dernière intervention
6 mars 2019
13 -
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 ?
Messages postés
124
Date d'inscription
mercredi 31 octobre 2007
Statut
Membre
Dernière intervention
6 mars 2019
13
0
Merci
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


Hydr0s
Messages postés
1677
Date d'inscription
lundi 24 janvier 2011
Statut
Membre
Dernière intervention
12 octobre 2019
312 -
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>
depaninf
Messages postés
124
Date d'inscription
mercredi 31 octobre 2007
Statut
Membre
Dernière intervention
6 mars 2019
13 -
Mais non c'est la version 4 de bootstrap, c'est la dernière il me semble.
Messages postés
124
Date d'inscription
mercredi 31 octobre 2007
Statut
Membre
Dernière intervention
6 mars 2019
13
0
Merci
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 ?

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
1677
Date d'inscription
lundi 24 janvier 2011
Statut
Membre
Dernière intervention
12 octobre 2019
-
Je viens de comprendre que le site fonctionne sur Iphone 7 (Safari) mais pas sur Iphone 6....
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
1677
Date d'inscription
lundi 24 janvier 2011
Statut
Membre
Dernière intervention
12 octobre 2019
-
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
depaninf
Messages postés
124
Date d'inscription
mercredi 31 octobre 2007
Statut
Membre
Dernière intervention
6 mars 2019
13 -
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
depaninf
Messages postés
124
Date d'inscription
mercredi 31 octobre 2007
Statut
Membre
Dernière intervention
6 mars 2019
13 -
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
Hydr0s
Messages postés
1677
Date d'inscription
lundi 24 janvier 2011
Statut
Membre
Dernière intervention
12 octobre 2019
312 -
Peux tu mettre les sources du site sur ci-joint par exemple ? C'est du html brut, pas de cms derrière ?

Pour essayer, enlève le loader, il ne sert que si tu as de l'ajax sur le site ce qui n'est pas le cas...