taille header

This commit is contained in:
ouidade 2024-09-20 23:07:52 +02:00
parent 28656159e4
commit 99d05401b8
3 changed files with 39 additions and 8 deletions

View File

@ -282,7 +282,7 @@ header .header_left_container #block-quartiers-de-demain-logorepu-2 {
} }
@media (max-width: 891px) { @media (max-width: 891px) {
header .header_left_container #block-quartiers-de-demain-logorepu-2 { header .header_left_container #block-quartiers-de-demain-logorepu-2 {
height: 110px; height: 160px;
} }
} }
header .header_left_container #block-quartiers-de-demain-logoepau-2 { header .header_left_container #block-quartiers-de-demain-logoepau-2 {
@ -291,7 +291,7 @@ header .header_left_container #block-quartiers-de-demain-logoepau-2 {
} }
@media (max-width: 891px) { @media (max-width: 891px) {
header .header_left_container #block-quartiers-de-demain-logoepau-2 { header .header_left_container #block-quartiers-de-demain-logoepau-2 {
height: 110px; height: 160px;
} }
} }
header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain { header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain {
@ -301,6 +301,11 @@ header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .
width: 90%; width: 90%;
margin: auto; margin: auto;
} }
@media (max-width: 1650px) {
header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo {
width: 80%;
}
}
header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header { header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header {
width: 100%; width: 100%;
} }
@ -313,7 +318,7 @@ header .header_left_container img {
} }
@media (max-width: 891px) { @media (max-width: 891px) {
header .header_left_container img { header .header_left_container img {
height: 110px; height: 160px;
} }
} }
@media (max-width: 660px) { @media (max-width: 660px) {
@ -376,6 +381,11 @@ header .header_nav_container {
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
z-index: -1; z-index: -1;
} }
@media (max-width: 1090px) {
header .header_nav_container {
text-align: left;
}
}
@media (max-width: 500px) { @media (max-width: 500px) {
header .header_nav_container { header .header_nav_container {
flex: 0 0 40%; flex: 0 0 40%;
@ -394,9 +404,14 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
padding-right: 1rem; padding-right: 1rem;
margin: 0; margin: 0;
} }
@media (max-width: 1200px) {
header .header_nav_container #block-quartiers-de-demain-entete ul {
top: 0;
}
}
@media (max-width: 810px) { @media (max-width: 810px) {
header .header_nav_container #block-quartiers-de-demain-entete ul { header .header_nav_container #block-quartiers-de-demain-entete ul {
top: 27.5px; top: 40px;
align-items: center; align-items: center;
margin: 1rem; margin: 1rem;
} }
@ -413,7 +428,7 @@ header .header_nav_container #block-quartiers-de-demain-entete ul li a {
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
header .header_nav_container #block-quartiers-de-demain-entete ul li a { header .header_nav_container #block-quartiers-de-demain-entete ul li a {
font-size: 0.9rem; font-size: 0.6rem;
} }
} }
@media (max-width: 500px) { @media (max-width: 500px) {
@ -457,6 +472,11 @@ header .header:hover + .header_nav_container {
transform-origin: bottom right; transform-origin: bottom right;
transition: all 1s ease-in-out; transition: all 1s ease-in-out;
} }
@media (max-width: 1600px) {
.header--collapsed {
height: 160px;
}
}
.header--collapsed .qdd-header { .header--collapsed .qdd-header {
opacity: 1 !important; opacity: 1 !important;
} }

View File

@ -1,6 +1,6 @@
$header-height : 270px; $header-height : 270px;
$header-height-pad : 110px; $header-height-pad : 160px;
$header-height-small : 70px; $header-height-small : 70px;
$header-height-ultrasmall : 50px; $header-height-ultrasmall : 50px;
$width-menu-slidedown : 550px; $width-menu-slidedown : 550px;

View File

@ -49,6 +49,9 @@ header{
.field_field_logo{ .field_field_logo{
width: 90%; width: 90%;
margin: auto; margin: auto;
@media(max-width: 1650px){
width: 80%;
}
.qdd-header{ .qdd-header{
width: 100%; width: 100%;
} }
@ -116,6 +119,9 @@ header{
transform: translateX(0); transform: translateX(0);
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
z-index: -1 ; z-index: -1 ;
@media(max-width: 1090px){
text-align:left;
}
@media(max-width: 500px){ @media(max-width: 500px){
flex: 0 0 40%; flex: 0 0 40%;
} }
@ -133,6 +139,9 @@ header{
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
margin: 0; margin: 0;
@media(max-width: 1200px){
top:0;
}
@media(max-width: 810px){ @media(max-width: 810px){
top: calc($header-height-pad / 4 ); top: calc($header-height-pad / 4 );
align-items: center; align-items: center;
@ -143,12 +152,11 @@ header{
padding-top: 0.3rem; padding-top: 0.3rem;
} }
a{ a{
text-transform: uppercase; text-transform: uppercase;
color: white; color: white;
font-size: 0.5rem; font-size: 0.5rem;
@media(max-width:1090px){ @media(max-width:1090px){
font-size: 0.9rem; font-size: 0.6rem;
} }
@media(max-width: 500px){ @media(max-width: 500px){
display: flex; display: flex;
@ -200,6 +208,9 @@ header{
width: 45%; width: 45%;
transform-origin: bottom right; transform-origin: bottom right;
transition: all 1s ease-in-out; transition: all 1s ease-in-out;
@media(max-width: 1600px) {
height: $header-height-pad;
}
.qdd-header{ .qdd-header{
opacity: 1 !important; opacity: 1 !important;
} }