Menu mobile pas laid + hidden quand desktop
This commit is contained in:
parent
842af85788
commit
ed8d3d0687
2 changed files with 71 additions and 57 deletions
|
@ -19,12 +19,14 @@
|
|||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited{
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.headerMenu{
|
||||
background-color: #fff;
|
||||
font-family: "Poppins";
|
||||
font-weight: 400; /*regular*/
|
||||
font-size: 1.25rem; /*20px*/
|
||||
|
@ -49,18 +51,39 @@ text-decoration: none;
|
|||
fill: #394596;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.headerMenuMobile{
|
||||
font-family: "Poppins";
|
||||
font-weight: 400; /*regular*/
|
||||
font-size: 1.25rem; /*20px*/
|
||||
color: #000; /*Noir pur*/
|
||||
list-style: none;
|
||||
font-style: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-is-active{
|
||||
background-color: #fff;
|
||||
font-size: 2rem; /*32px*/
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
position: fixed;
|
||||
top: 75px;
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
margin: 0;
|
||||
padding-top: 200px;
|
||||
padding-bottom: 200px;
|
||||
|
||||
}
|
||||
|
||||
/* Le header s'affiche en menu hamburger pour les breakpoints téléphone et tablette */
|
||||
|
||||
|
||||
.headerMenuHamburger{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 778px) {
|
||||
.headerMenu{
|
||||
display: none;
|
||||
|
@ -68,6 +91,11 @@ text-decoration: none;
|
|||
.headerMenuHamburger{
|
||||
display: block;
|
||||
}
|
||||
.nav-is-active{
|
||||
font-size: 3rem; /*48px*/
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Les éléments du header s'affichent pour le breakpoint ordinateur */
|
||||
|
@ -81,23 +109,10 @@ text-decoration: none;
|
|||
.headerMenuHamburger{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.headerMenuMobile{
|
||||
font-family: "Poppins";
|
||||
font-weight: 400; /*regular*/
|
||||
font-size: 1.25rem; /*20px*/
|
||||
color: #000; /*Noir pur*/
|
||||
list-style: none;
|
||||
font-style: none;
|
||||
.nav-is-active{
|
||||
display: none;
|
||||
}
|
||||
.nav-is-active{
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
top: 75px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -3,7 +3,6 @@
|
|||
<script>
|
||||
function onToggleNav() {
|
||||
var menu = document.querySelector(".headerMenuMobile");
|
||||
console.log(menu);
|
||||
menu.classList.toggle('nav-is-active');
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in a new issue