agecem/agecem-org
4
1
Fork 0
Code Issues 31 Pull requests 2 Activity

Ajouter responsiveness au header #93

Merged
vlbeaudoin merged 21 commits from feature/responsive-header into main 2023-08-16 13:43:50 -04:00
Conversation 0 Commits 21 Files changed 15 +71 -57
2 changed files with 71 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit ed8d3d0687 - Show all commits

127
public/css/header.css
View file

@ -7,24 +7,26 @@
height: 75px; height: 75px;
} }
.headerWrapper{ .headerWrapper{
display: flex; display: flex;
flex-flow: row; flex-flow: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 5px; padding: 5px;
} }
a{ a{
color: #000; color: #000;
text-decoration: none; text-decoration: none;
} }
a:visited{
color: #000;
text-decoration: none;
}
.headerMenu { a:visited{
color: #000;
text-decoration: none;
}
.headerMenu{
background-color: #fff;
font-family: "Poppins"; font-family: "Poppins";
font-weight: 400; /*regular*/ font-weight: 400; /*regular*/
font-size: 1.25rem; /*20px*/ font-size: 1.25rem; /*20px*/
@ -33,45 +35,71 @@ text-decoration: none;
font-style: none; font-style: none;
display: none; display: none;
width: 100%; width: 100%;
} }
.headerMenuElement{ .headerMenuElement{
padding-bottom: 5px; padding-bottom: 5px;
} }
.headerMenuElement:hover { .headerMenuElement:hover {
border-bottom: 5px #FF563C solid; /*Orange Highlight*/ border-bottom: 5px #FF563C solid; /*Orange Highlight*/
cursor: pointer; cursor: pointer;
padding-bottom: 0; padding-bottom: 0;
} }
.headerMenuHamburger{ .headerMenuHamburger{
fill: #394596; fill: #394596;
height: 50px; height: 50px;
width: 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 */ /* Le header s'affiche en menu hamburger pour les breakpoints téléphone et tablette */
@media screen and (min-width: 778px) {
.headerMenu{
.headerMenuHamburger{
display: block;
}
@media screen and (min-width: 778px) {
.headerMenu{
display: none; display: none;
} }
.headerMenuHamburger{ .headerMenuHamburger{
display: block; 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 */ /* Les éléments du header s'affichent pour le breakpoint ordinateur */
@media screen and (min-width: 1140px) { @media screen and (min-width: 1140px) {
.headerMenu{ .headerMenu{
display: flex; display: flex;
flex-flow: row; flex-flow: row;
@ -81,23 +109,10 @@ text-decoration: none;
.headerMenuHamburger{ .headerMenuHamburger{
display: none; display: none;
} }
} .nav-is-active{
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;
display: none;
}
.nav-is-active{
background-color: #fff;
display: flex;
flex-flow: column;
justify-content: space-between;
position: fixed;
top: 75px;
}

1
templates/html/header.gohtml
View file

@ -3,7 +3,6 @@
<script> <script>
function onToggleNav() { function onToggleNav() {
var menu = document.querySelector(".headerMenuMobile"); var menu = document.querySelector(".headerMenuMobile");
console.log(menu);
menu.classList.toggle('nav-is-active'); menu.classList.toggle('nav-is-active');
} }
</script> </script>