bachir/drupal-erable
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modifs header sticky

Browse Source
This commit is contained in:
Valentin
2024-04-10 12:37:31 +02:00
parent 440134ae68
commit 1b9e835792
4 changed files with 92 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/themes/erabletheme/scss/global/_global.scss
View File

@@ -1,9 +1,17 @@
main[role="main"] {
/* main[role="main"] {
margin-top: 10vh;
@media (min-width: $breakpoint_desktop) {
margin-top: calc(10vh + 3rem);
}
} */
body {
overflow-x: hidden;
}
.layout-container {
margin: 0 !important;
}
strong {

60
web/themes/erabletheme/scss/partials/_header.scss
View File

@@ -9,24 +9,23 @@ body.toolbar-fixed header[role="banner"] {
}
.layout-container {
width: 100%;
overflow: hidden;
//max-width: 100vw;
//overflow: hidden;
header[role="banner"] {
width: 100%;
background: white;
position: fixed;
top: 0;
left: 0;
z-index: 99;
z-index: 99;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
@media (min-width: $breakpoint_desktop) {
position: sticky;
top: -12vh;
box-shadow: none;
}
> div {
display: grid;
grid-template-columns: repeat(16, 1fr);
> div{
height: 10vh;
height: 12vh;
grid-row: 1;
max-height: 100%;
width: 100%;
@@ -36,7 +35,7 @@ body.toolbar-fixed header[role="banner"] {
justify-content: center;
align-items: center;
> div {
height: 10vh;
height: 12vh;
a {
display: block;
height: 100%;
@@ -55,6 +54,10 @@ body.toolbar-fixed header[role="banner"] {
}
}
#block-erabletheme-logorep-2 {
img {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
}
grid-column: 1 / 5;
@media (min-width: $breakpoint_tablet) {
grid-column: 0 / 4;
@@ -64,24 +67,41 @@ body.toolbar-fixed header[role="banner"] {
}
}
#block-erabletheme-logoepau-2 {
grid-column: 5 / 10;
grid-column: 5 / 9;
> div {
align-items: flex-start;
justify-content: flex-start;
> div > a > img {
transform: translateX(-20px);
padding-top: 1.2rem;
padding-bottom: 1.2rem;
}
}
@media (min-width: $breakpoint_tablet) {
grid-column: 4 / 7;
> div > div > a > img {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
}
@media (min-width: $breakpoint_desktop) {
grid-column: 3 / 6;
img {
padding: 0 1rem;
> div > div > a > img {
transform: translateX(-40px);
padding-top: 30px;
padding-bottom: 30px;
}
}
}
#block-erabletheme-logoerable {
grid-column: 11 / 15;
grid-column: 10 / 15;
@media (min-width: $breakpoint_desktop) {
grid-column: 14 / 16;
}
img {
padding: 0 1.5rem;
padding-right: 1rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
}
}
#block-erabletheme-socialmedialinks {
@@ -94,7 +114,7 @@ body.toolbar-fixed header[role="banner"] {
}
#hamburger {
cursor: pointer;
width: 100%;
width: auto;
height: 100%;
background-color: $fluo_green;
display: flex;
@@ -137,16 +157,14 @@ body.toolbar-fixed header[role="banner"] {
}
}
ul:not(.social-media-links--platforms) {
position: absolute;
z-index: -1;
display: none;
height: auto;
max-height: 0vh;
transition: max-height 0.9s ease, padding 0.5s ease-out;
position: fixed;
background-color: $dark_green;
top: 10vh;
left: 0;
width: 100vw;
z-index: 0;
padding: 0;
align-items: center;
flex-direction: column;
@@ -236,12 +254,8 @@ body.toolbar-fixed header[role="banner"] {
}
}
#block-erabletheme-navigationprincipale {
position: fixed;
width: 100%;
margin-top: 10vh;
width: 100vw;
display: none;
grid-column: 1 / 17;
grid-row: 2;
background-color: white;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
@media (min-width: $breakpoint_desktop) {