agecem/agecem-org
4
1
Fork 0
Code Issues 30 Pull requests 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 +11 -4
2 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit b9b0e6f907 - Show all commits

13
public/css/header.css
View file

@ -11,6 +11,12 @@
flex-flow: row; flex-flow: row;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
list-style: none;
}
.headerMenuElement{
} }
.headerMenuElement:hover { .headerMenuElement:hover {
@ -22,18 +28,19 @@
fill: #394596; fill: #394596;
height: 100px; height: 100px;
width: 100px; width: 100px;
} }
/* 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 (max-width: 576px) {
.headerMenuElement{ .headerMenuElement{
display: none; display: none;
} }
.headerMenuHamburger{ .headerMenuHamburger{
display: block; display: block;
} }
}
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
.headerMenuElement{ .headerMenuElement{
@ -49,7 +56,7 @@
.headerMenuElement{ .headerMenuElement{
display: block; display: block;
} }
.hamburgerMenuIcon{ .headerMenuHamburger{
display: none; display: none;
} }
} }

2
templates/html/header.gohtml
View file

@ -2,7 +2,7 @@
<link rel="stylesheet" href="/public/css/header.css"> <link rel="stylesheet" href="/public/css/header.css">
<div class="header"> <div class="header">
<ul class="headerMenu"> <ul class="headerMenu">
<li class="headerMenuElement"><a href="/"><svg class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg"></svg></a></li> <li><a class="headerLink" href="/"><img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg"></img></a></li>
<li class="headerMenuElement"><a href="/">index</a></li> <li class="headerMenuElement"><a href="/">index</a></li>
<li class="headerMenuElement"><a href="/a-propos">À propos</a></li> <li class="headerMenuElement"><a href="/a-propos">À propos</a></li>
<li class="headerMenuElement"><a href="/actualite">Actualité</a></li> <li class="headerMenuElement"><a href="/actualite">Actualité</a></li>