Discussion :

[PremiereMesure]

Bonjour , je débute en CSS et en HTML


J'essaie de faire un menu burger pour mon responsive design , j'ai testé ce que je voulais faire sur une page html et css vierge et cela fonctionne comme je veux
Quand j’intègre le menu à mon site , j'arrive a changer l'apparence de la checkbox en une icone sur laquelle un clic va déclencher le déroulement du menu mais je comprend pas pourquoi j'ai un carré blanc au dessus qui n’était pas présent sur ma page vierge.

Ici la photo avec le bloc blanc



Et le même code sur ma page vierge

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
.menu .burger
{
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  color:black;
  cursor:pointer;
  font-family:'Material Icons';
  font-size:30px;
  line-height:50px;
  margin:0;
  outline:0;
  padding:0;
  position:absolute;
  text-align:center;
  top:0;
  left:10px;
  width:50px;
}
 
.menu .burger:before
{
  content:'menu';
}
 
.menu .burger:checked:before
{
  content:'close';
}

Merci d'avance pour vos réponses !

[NoSmoking]

Bonjour,
pour pouvoir te répondre il nous faudrait le « code HTML minimum » générant cette affichage cela permet en outre de faire des tests.

[PremiereMesure]

Bonjour !

Oui bien sur je sais meme pas pourquoi j'y ai pas pensé tout seul

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
   <div class="menu">
 
                    <span class="title"></span>
                    <input class="burger" type="checkbox">
 
                    <nav>
                        <a href="#accueil"><i class="material-icons">home</i>Accueil</a>
                        <a href="#services"><i class="material-icons">build</i>Services</a>
                        <a href="#portfolio"><i class="material-icons">dvr</i>Portfolio</a>
                        <a href="#contact"><i class="material-icons">alternate_email</i>Contact</a>
                    </nav>
    </div>

[PremiereMesure]

Bon j'ai fini par trouver la réponse tout seul , le code était bon j'avais juste sur ma page des attributs pour tout les inputs qui faisait cette bordure grise arrondie pour un formulaire plus bas , une erreur de débutant.....

Merci quand même

Bonne soirée .