diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index e76535a..695abbb 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -82,7 +82,6 @@ /* Manifont Grotesk */ /* Colors used for EQL */ .layout-container { - position: absolute; font-family: "Marianne", sans-serif; margin: none; top: 0%; @@ -217,6 +216,7 @@ a { display: flex; flex-direction: column; } #header-top #block-burger { + z-index: 1; background-color: #009ee3; font-size: 0.7rem; color: white; @@ -224,40 +224,42 @@ a { width: 7rem; height: 7rem; margin-top: 0; } + #header-top #block-burger :hover { + cursor: pointer; } #header-top #block-burger h2::after { display: block; font-family: 'Font Awesome'; content: "\f0c9"; - font-size: 5rem; } + height: 60px; + font-size: 1rem; } #header-top #block-burger #block-burger-menu { display: block; - margin-top: 0; + margin: 0; align-self: center; - text-align: center; } + text-align: center; + height: 7rem; } #header-top #block-burger ul { - display: none; } - #header-top #block-burger ul .open { - width: 100vw; - position: relative; - bottom: 8%; - left: calc(-30vw + 50%); - display: block; - height: fit-content; - padding-bottom: 1rem; - padding-top: 1rem; - background-color: #009ee3; - line-height: 2rem; - list-style: none; } - #header-top #block-burger ul .open .ul1 .sous-liste { - left: calc(-50vw + 50%); - padding-top: 0; } - #header-top #block-burger ul .open .ul1 .sous-liste a { - opacity: 1; } - #header-top #block-burger ul .open a { - color: white; - font-weight: 800; - font-size: 1.7rem; - opacity: 0.7; } + display: none; + width: 100vw; + position: relative; + bottom: 8%; + left: calc(-30vw + 50%); + height: fit-content; + padding-bottom: 1rem; + padding-top: 1rem; + background-color: #009ee3; + line-height: 2rem; + list-style: none; } + #header-top #block-burger ul .ul1 .sous-liste { + left: calc(-50vw + 50%); + padding-top: 0; } + #header-top #block-burger ul .ul1 .sous-liste a { + opacity: 1; } + #header-top #block-burger ul a { + color: white; + font-weight: 800; + font-size: 1.7rem; + opacity: 0.7; } #fotter-bottom { display: flex; diff --git a/web/themes/custom/eql/eql.libraries.yml b/web/themes/custom/eql/eql.libraries.yml index 023e700..701553d 100644 --- a/web/themes/custom/eql/eql.libraries.yml +++ b/web/themes/custom/eql/eql.libraries.yml @@ -7,10 +7,8 @@ global-css: - global-js: js: - theme: js/eql-menu-burger.js: {} diff --git a/web/themes/custom/eql/js/eql-menu-burger.js b/web/themes/custom/eql/js/eql-menu-burger.js index 963b162..d72f3d5 100644 --- a/web/themes/custom/eql/js/eql-menu-burger.js +++ b/web/themes/custom/eql/js/eql-menu-burger.js @@ -1,29 +1,20 @@ - -// jQuery(document).ready(function($){ - - -// $("#block-burger").click(function(event){ -// var mods = document.querySelectorAll('.ul1'); -// mods.forEach((m, i) => { -// m.classList.remove('.open') -// }); -// var btn = event.currentTarget; -// var mod = btn.parentNode.querySelector('.ul1'); -// mod.classList.add('.open') +// menu burger open -// }); +// document.getElementById("block-burger").addEventListener("click", menuOpen); -// $(".ul1, .ul1 a").click(function(event){ -// $ (".ul1").removeClass(".open"); -// return false; -// }); +// function menuOpen() { +// document.querySelector("ul").style.display = "block"; +// } -// }); -remove.onClick = () => { - const ul1 = document.querySelector('.ul1'); +var burgerButon = document.getElementById('block-burger-menu'); +var blockMenuOpen = document.querySelector(/html/body/div/div/header/section/div[2]/nav/ul.ul1); - ul1.classList.add("open"); - +function menuOpen() { + if (blockMenuOpen.style.display === 'none') { + blockMenuOpen.style.display = 'block'; + } else { + blockMenuOpen.style.display = 'none'; + } } \ No newline at end of file diff --git a/web/themes/custom/eql/scss/global/_layout.scss b/web/themes/custom/eql/scss/global/_layout.scss index 05e1fbd..fc0fafd 100644 --- a/web/themes/custom/eql/scss/global/_layout.scss +++ b/web/themes/custom/eql/scss/global/_layout.scss @@ -5,7 +5,7 @@ .layout-container { - position: absolute; + // position: absolute; font-family: $font-family-default; margin: none; top: 0%; diff --git a/web/themes/custom/eql/scss/partials/_header.scss b/web/themes/custom/eql/scss/partials/_header.scss index 4954a21..d8b67e9 100644 --- a/web/themes/custom/eql/scss/partials/_header.scss +++ b/web/themes/custom/eql/scss/partials/_header.scss @@ -57,69 +57,63 @@ // } #block-burger { + z-index: 1; background-color: $blue-light; font-size: 0.7rem; color: $white; display: block; - width: 7rem; height: 7rem; margin-top: 0; + :hover{ + cursor: pointer; + } h2::after{ display: block; font-family: 'Font Awesome'; content: "\f0c9"; + height: 60px; - font-size: 5rem; + font-size: 1rem; } #block-burger-menu{ display: block; - // content: url(../../images/pictos/icons8-menu.svg); - margin-top: 0; + margin: 0; align-self: center; text-align: center; - + height:7rem; } - ul { - display: none; - .open{ - width: 100vw; - position: relative; - bottom:8%;; - left: calc(-30vw + 50%); - display: block; - height: fit-content; - padding-bottom: 1rem; - padding-top: 1rem; - background-color: $blue-light; - line-height: 2rem; - list-style: none; - - .ul1 .sous-liste{ - left: calc(-50vw + 50%); - padding-top: 0; - a{ - opacity: 1; - } - } - a{ - color: $white; - font-weight: 800; - font-size: 1.7rem; - opacity: 0.7; - } - } + // ul {display: none;} + ul { + display: none; + width: 100vw; + position: relative; + bottom:8%;; + left: calc(-30vw + 50%); + height: fit-content; + padding-bottom: 1rem; + padding-top: 1rem; + background-color: $blue-light; + line-height: 2rem; + list-style: none; + + .ul1 .sous-liste{ + left: calc(-50vw + 50%); + padding-top: 0; + a{ + opacity: 1; + } } + a{ + color: $white; + font-weight: 800; + font-size: 1.7rem; + opacity: 0.7; + } + } } - - - - - - - }