header menu déroulant fond blanc & position

This commit is contained in:
2021-11-19 17:24:17 +01:00
parent a7718ef9be
commit 5193ca86ae
3 changed files with 44 additions and 21 deletions
+16 -8
View File
@@ -163,6 +163,8 @@ a {
border-bottom: 1px solid #009ee3; border-bottom: 1px solid #009ee3;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
padding-top: 0.5rem; } padding-top: 0.5rem; }
.layout__region--first .block-region-first .block-entity-fieldnodefield-textes .field--name-field-titre:hover {
text-decoration: underline; }
.layout__region--second .block-entity-fieldnodefield-textes .field--name-field-titre { .layout__region--second .block-entity-fieldnodefield-textes .field--name-field-titre {
font-size: 2rem; font-size: 2rem;
@@ -339,29 +341,35 @@ a {
/*partials*/ /*partials*/
.layout-container { .layout-container {
position: absolute; } position: relative; }
header { header {
display: block; display: block;
position: sticky; position: sticky; }
top: 0; }
#header-top { #header-top {
height: fit-content; height: 7rem;
background-color: white; background-color: white;
box-shadow: 1px 0px 8px black; box-shadow: 1px 0px 8px black;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
color: black; } color: black;
position: sticky;
top: 0%; }
#header-top .region-header-top-left { #header-top .region-header-top-left {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 1rem; padding: 1rem;
align-items: center; align-items: start;
color: black; color: black;
font-weight: 800; } font-weight: 800; }
#header-top .region-header-top-left #block-logogouv {
display: flex;
height: 100%;
align-items: center; }
#header-top .region-header-top-left ul { #header-top .region-header-top-left ul {
position: absolute;
list-style: none; list-style: none;
display: flex; display: flex;
flex-direction: row; } flex-direction: row; }
@@ -381,8 +389,8 @@ header {
position: relative; } position: relative; }
#header-top .region-header-top-left :hover .ul2 { #header-top .region-header-top-left :hover .ul2 {
display: block; display: block;
position: relative; background-color: white;
transition: ease-in-out 2s; } padding: 1rem; }
#header-top li .ul1 { #header-top li .ul1 {
display: flex; display: flex;
flex-direction: column; } flex-direction: column; }
@@ -61,9 +61,11 @@
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
padding-top: 0.5rem; padding-top: 0.5rem;
// &:focus{ &:hover{
// text-decoration: underline; text-decoration: underline;
// } }
// &::after{ // &::after{
// border-bottom: olivedrab; // border-bottom: olivedrab;
// } // }
@@ -1,39 +1,45 @@
.layout-container{ .layout-container{
position: absolute; position: relative;
} }
header{ header{
display: block; display: block;
position: sticky; position: sticky;
top:0;
} }
#header-top { #header-top {
height: fit-content; height: 7rem;
background-color: $white; background-color: $white;
box-shadow: 1px 0px 8px $black; box-shadow: 1px 0px 8px $black;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
color: $black; color: $black;
position: sticky;
top:0%;
.region-header-top-left { .region-header-top-left {
display:flex; display:flex;
flex-direction: row; flex-direction: row;
padding: 1rem; padding: 1rem;
align-items: center; align-items:start;
color: $black; color: $black;
font-weight: 800; font-weight: 800;
ul{ #block-logogouv{
display: flex;
height: 100%;
align-items: center;
}
ul{
position: absolute;
list-style: none; list-style: none;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
li { li {
// background-color: red;
padding-right: 1rem; padding-right: 1rem;
a { a {
color: $black; color: $black;
@@ -45,6 +51,7 @@ display: block;
.ul2{ .ul2{
flex-direction: column; flex-direction: column;
display: none; display: none;
} }
:hover{ :hover{
color: $blue-light; color: $blue-light;
@@ -59,8 +66,14 @@ display: block;
:hover { :hover {
.ul2{ .ul2{
display: block; display: block;
position: relative; background-color: $white;
transition: ease-in-out 2s; padding: 1rem;
// a{
// color: $white;
// }
// position: relative;
// transition: ease-in-out 2s;
} }
} }