Bonjour,
Je debute dans le web , j'ai créé un petit site et j'aimerai faire un menu hamburger en mobile responsive.
J'ai beau chercher sur le net je ne trouve pas de code qui casse pas ma page...
si quelqu'un aurait la gentillesse de bien vouloir m'aider ou me donner un lien d'exemple de menu css responsive adaptable a mon site sa serait cool. De plus je n'y connais pas grand chose en jquery
Je vous donne mon HTML et mon CSS , merci d'avance
html :
css:
Je debute dans le web , j'ai créé un petit site et j'aimerai faire un menu hamburger en mobile responsive.
J'ai beau chercher sur le net je ne trouve pas de code qui casse pas ma page...
si quelqu'un aurait la gentillesse de bien vouloir m'aider ou me donner un lien d'exemple de menu css responsive adaptable a mon site sa serait cool. De plus je n'y connais pas grand chose en jquery
Je vous donne mon HTML et mon CSS , merci d'avance
html :
<header id="header">
<nav>
<a href="http://kevin-oger.esy.es/"><img src="img/logo.png" alt="logo"></a>
<ul>
<li><a href="#section1">Accueil</a></li>
<li><a href="#section2">Présentation</a></li>
<li><a href="#section3">Compétences</a></li>
<li><a href="#section4">Contacts</a></li>
</ul>
<i class="fa fa-bars" aria-hidden="true"></i>
</nav>
</header>
css:
nav {
text-align: right;
padding-right: 2rem;
width: 100%;
position: relative;
}
nav .fa {
position: absolute;
top: 1.5rem;
right: 3rem;
font-size: 2.5rem;
}
nav ul,nav li {
display: inline-block;
list-style: none;
}
nav a {
display: inline-block;
padding: .8em 2em;
vertical-align: middle;
font-weight: 300; /* entre regular et light */
letter-spacing: 0.025em;
color: inherit;
text-decoration: none;
cursor: pointer;
}
nav li {
display: none;
}
nav li:hover{
background-color: white;
}
nav a:hover {
color:black;
}
.fa-bars {
z-index: 1;
}
@media screen and (min-width:950px) {
nav {
text-align: right;
position: fixed;
width: 100%;
height: 7rem;
z-index: 2;
}
nav .fa {
display: none;
}
nav li {
display: inline-block;
}
}
