From b259a3bec992b671e41f6b8abd36d5f632b9d329 Mon Sep 17 00:00:00 2001 From: Anonymous Contributor Date: Fri, 15 Sep 2023 14:34:19 +0200 Subject: [PATCH] Optimize mobile and desktop navbars --- css/navbar.css | 451 ++++++++++++++++++++++++++-- templates/partials/header.html.twig | 68 ++--- 2 files changed, 437 insertions(+), 82 deletions(-) diff --git a/css/navbar.css b/css/navbar.css index 7dfa53a..fbd28a5 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -26,46 +26,27 @@ transition: top 0.35s; } -.imMnMnCurrent .main-nav-label, .main-nav-label:hover, #imStickyBarObjects .main-nav-label:hover, .sub-nav-label:hover { - background-color: rgb(204, 204, 204); - background-image: none; - border-color: rgb(211, 211, 211); - border-style: solid; - - color: rgb(243, 243, 243); +.nav-level > a:hover + ul { + display: block } -.imMnMnCurrent .main-nav-label { - color: rgb(255, 0, 0); -} - -#imStickyBarObjects .main-nav-label { - background: transparent; - font-weight: normal; - width: 141px; - height: 31px; - padding: 0px 2px; -} - -#imStickyBarObjects .imMnMnCurrent .main-nav-label { - background-color: rgb(204, 204, 204); - background-image: none; - border-color: rgb(211, 211, 211); - border-style: solid; -} - -.imLevel .open-bottom { +.nav-level .open-bottom { opacity: 0; - transition: opacity 1s; + visibility: hidden; + transition: visibility 0s, opacity 1s; } -.imLevel .open-bottom li { +.nav-level .open-bottom li { position: relative; margin-bottom: 0px; display: inline-block; vertical-align: top; } +.nav-level .open-bottom li > a:hover { + color: rgb(67, 67, 67); +} + .sub-nav-label { width: 143px; height: 28px; @@ -75,7 +56,415 @@ font-size: 11pt; } -.imLevel:hover > .open-bottom { - display: block; +.nav-level:hover > .open-bottom { + visibility: visible; opacity: 1; } + +.nav-label-active .main-nav-label, .nav-level:hover > a, .main-nav-label:hover { + background-color: rgb(204, 204, 204) !important; + background-image: none; + border-color: rgb(211, 211, 211); + border-style: solid; + color: rgb(243, 243, 243); +} + +#nav-top { position: relative; -ms-grid-row-align: start; align-self: start; -ms-grid-column-align: center; justify-self: center; max-width: 100%; box-sizing: border-box; z-index: 103; } +/**************************************************************************************************************************************************************/ +@media (max-width: 1149.9px) and (min-width: 720px) { + #nav-top_wrapper { position: absolute; top: 154px; left: 650px; width: 70px; height: 38px; text-align: center; z-index: 1006; } + #nav-top { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; text-align: right; } + /* Main menu background */ + #nav-top-container { border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; width: 100%; box-sizing: border-box; background-color: transparent; padding: 0px 0px 0px 0px; display: inline-table;} + #nav-top-container > ul:after {content: '';display: table;clear: both; } + /* Main menu button size and position */ + #nav-top-container > ul > li {position: relative;margin-left: 2px; margin-top: 0px; display: inline-block; vertical-align: top; } + #nav-top .hamburger-bar { margin: 3px auto; width: 65%; height: 3px; background-color: rgba(243, 243, 243, 1); } + /* Main menu separator button style */ + #nav-top .nav-level { cursor: default; } + #nav-top-menu-opened .nav-level { cursor: default; } + #nav-top .hidden { display: none; } + #nav-top-menu-opened { overflow: visible; z-index: 10402; position:fixed; top: 0; bottom: 0; left: 0; width: 150px; border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } + #nav-top-menu-opened ul ul { display: none; /*margin-bottom: 1px;*/ } + #nav-top-menu-opened li > div { display: none; } + #nav-top-menu-opened #nav-top-container-menu-opened div > ul { display: block; } + #nav-top-menu-opened #nav-top-container-menu-opened > ul { position: absolute; left: 0; right: auto; top: 40px; background-color: rgba(67, 67, 67, 1); overflow-x: hidden; overflow-y: auto; height: calc(100% - 40px); width: 100%; } + #nav-top-menu-opened .hamburger-menu-close-button { display: block; font-family: 'Arial', sans-serif; font-size: 30px; text-align: right; padding: 5px 10px; color: rgba(255, 255, 255, 1); } + #nav-top-menu-opened .hamburger-menu-close-button span { cursor: pointer; } + #imPageExtContainer:after{ position: fixed; top: 0; right: 0; width: 0; height: 0; content: ''; opacity: 0; transition: opacity 1000ms; z-index: 10401;} + .menu-nav-top-opened #imPageExtContainer:after{ width: 100%; height: 100%; background-color: transparent; opacity: 0.65;} + .menu-nav-top-towards-closing #imPageExtContainer:after { width: 100%; height: 100%; background-color: transparent; opacity: 0.65; transition: background-color 1000ms linear, opacity;} + /* Responsive menu button size and position */ + #nav-top-menu-opened li {position: relative;margin-bottom: 0px; display: inline-block; vertical-align: top; } + #nav-top-menu-opened li:last-child {margin-bottom: 0;} + #nav-top-menu-opened .hamburger-menu-background { position: absolute;display: block;top: 0;bottom: 0;width: 150px;left: 0; right: auto;background-color: rgba(67, 67, 67, 1);transition: left 500ms, right 500ms, opacity 500ms;-webkit-transition: left 500ms, right 500ms, opacity 500ms;} + /* Responsive menu separation line style */ + #nav-top-menu-opened.animated { animation-name: finalZindex; animation-duration: 1000ms; animation-fill-mode: forwards;} + @keyframes finalZindex { 0% { z-index: 0; width: 0; } 99% { z-index: 0; width: 0; } 100% { z-index: 1001; width: 150px; }}#imPageExtContainer { z-index: 1; position: relative; transition: transform 1000ms; -webkit-transition: transform 1000ms;} + .menu-nav-top-opened #imPageExtContainer { transform: translate3d(150px, 0, 0);} +} + +@media (max-width: 719.9px) and (min-width: 480.0px) { + #nav-top_wrapper { position: absolute; top: 170px; left: 427px; width: 55px; height: 38px; text-align: center; z-index: 1006; } + #nav-top { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; text-align: right; } + /* Main menu background */ + #nav-top-container { border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; width: 100%; box-sizing: border-box; background-color: transparent; padding: 0px 0px 0px 0px; display: inline-table;} + #nav-top-container > ul:after {content: '';display: table;clear: both; } + /* Main menu button size and position */ + #nav-top-container > ul > li {position: relative;margin-left: 2px; margin-top: 0px; display: inline-block; vertical-align: top; } + /* Main menu separator button style */ + #nav-top .nav-level { cursor: default; } + #nav-top-menu-opened .nav-level { cursor: default; } + #nav-top .hidden { display: none; } + #nav-top-menu-opened { overflow: visible; z-index: 10402; } + #nav-top-menu-opened ul ul { display: none; /*margin-bottom: 1px;*/ } + #nav-top-menu-opened li > div { display: none; } + #nav-top-menu-opened #nav-top-container-menu-opened div > ul { display: block; } + #nav-top-menu-opened #nav-top-container-menu-opened > ul { position: absolute; left: 0; right: auto; top: 40px; background-color: rgba(67, 67, 67, 1); overflow-x: hidden; overflow-y: auto; height: calc(100% - 40px); width: 100%; } + #nav-top-menu-opened .hamburger-menu-close-button { display: block; font-family: 'Arial', sans-serif; font-size: 30px; text-align: right; padding: 5px 10px; color: rgba(255, 255, 255, 1); } + #nav-top-menu-opened .hamburger-menu-close-button span { cursor: pointer; } + #nav-top-menu-opened { position:fixed; top: 0; bottom: 0; left: 0; width: 150px; border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;; } + .menu-nav-top-opened #imPageExtContainer:after{ width: 100%; height: 100%; background-color: transparent; opacity: 0.65;} + .menu-nav-top-towards-closing #imPageExtContainer:after { width: 100%; height: 100%; background-color: transparent; opacity: 0.65; transition: background-color 1000ms linear, opacity;} + #nav-top .hidden { display: none; } + /* Responsive menu button size and position */ + #nav-top-menu-opened li {position: relative;margin-bottom: 0px; display: inline-block; vertical-align: top; } + #nav-top-menu-opened li:last-child {margin-bottom: 0;} + #nav-top-menu-opened .hamburger-menu-background { position: absolute;display: block;top: 0;bottom: 0;width: 150px;left: 0; right: auto;background-color: rgba(67, 67, 67, 1);transition: left 500ms, right 500ms, opacity 500ms;-webkit-transition: left 500ms, right 500ms, opacity 500ms;} + /* Responsive menu separation line style */ + #nav-top-menu-opened { z-index: 0; width: 0;} + #nav-top-menu-opened.animated { animation-name: finalZindex; animation-duration: 1000ms; animation-fill-mode: forwards;} + @keyframes finalZindex { 0% { z-index: 0; width: 0; } 99% { z-index: 0; width: 0; } 100% { z-index: 1001; width: 150px; }}#imPageExtContainer { z-index: 1; position: relative; transition: transform 1000ms; -webkit-transition: transform 1000ms;} + .menu-nav-top-opened #imPageExtContainer { transform: translate3d(150px, 0, 0);} +} + +@media (max-width: 479.9px) { + #nav-top_wrapper { position: absolute; top: 168px; left: 282px; width: 42px; height: 38px; text-align: center; z-index: 1004; } + #nav-top { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; text-align: right; } + /* Main menu background */ + #nav-top-container { border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; width: 100%; box-sizing: border-box; background-color: transparent; padding: 0px 0px 0px 0px; display: inline-table;} + #nav-top-container > ul:after {content: '';display: table;clear: both; } + /* Main menu button size and position */ + #nav-top-container > ul > li {position: relative;margin-left: 2px; margin-top: 0px; display: inline-block; vertical-align: top; } + /* Main menu separator button style */ + #nav-top .nav-level { cursor: default; } + #nav-top-menu-opened .nav-level { cursor: default; } + #nav-top .hidden { display: none; } + #nav-top-menu-opened { overflow: visible; z-index: 10402; } + #nav-top-menu-opened ul ul { display: none; /*margin-bottom: 1px;*/ } + #nav-top-menu-opened li > div { display: none; } + #nav-top-menu-opened #nav-top-container-menu-opened div > ul { display: block; } + #nav-top-menu-opened #nav-top-container-menu-opened > ul { position: absolute; left: 0; right: auto; top: 40px; background-color: rgba(67, 67, 67, 1); overflow-x: hidden; overflow-y: auto; height: calc(100% - 40px); width: 100%; } + #nav-top-menu-opened .hamburger-menu-close-button { display: block; font-family: 'Arial', sans-serif; font-size: 30px; text-align: right; padding: 5px 10px; color: rgba(255, 255, 255, 1); } + #nav-top-menu-opened .hamburger-menu-close-button span { cursor: pointer; } + #nav-top-menu-opened { position:fixed; top: 0; bottom: 0; left: 0; width: 150px; border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; z-index: 0; width: 0; } + .menu-nav-top-opened #imPageExtContainer:after{ width: 100%; height: 100%; background-color: transparent; opacity: 0.65;} + .menu-nav-top-towards-closing #imPageExtContainer:after { width: 100%; height: 100%; background-color: transparent; opacity: 0.65; transition: background-color 1000ms linear, opacity;} + #nav-top .hidden { display: none; } + /* Responsive menu button size and position */ + #nav-top-menu-opened li {position: relative;margin-bottom: 0px; display: inline-block; vertical-align: top; } + #nav-top-menu-opened li:last-child {margin-bottom: 0;} + #nav-top-menu-opened .hamburger-menu-background { position: absolute;display: block;top: 0;bottom: 0;width: 150px;left: 0; right: auto;background-color: rgba(67, 67, 67, 1);transition: left 500ms, right 500ms, opacity 500ms;-webkit-transition: left 500ms, right 500ms, opacity 500ms;} + /* Responsive menu separation line style */ + #nav-top-menu-opened.animated { animation-name: finalZindex; animation-duration: 1000ms; animation-fill-mode: forwards;} + @keyframes finalZindex { 0% { z-index: 0; width: 0; } 99% { z-index: 0; width: 0; } 100% { z-index: 1001; width: 150px; }}#imPageExtContainer { z-index: 1; position: relative; transition: transform 1000ms; -webkit-transition: transform 1000ms;} + .menu-nav-top-opened #imPageExtContainer { transform: translate3d(150px, 0, 0);} +} +/**************************************************************************************************************************************************************/ + +@media (max-width: 1149px) { + .hamburger-button { + background-color: rgb(67, 67, 67); + background-image: none; + border-color: rgb(211, 211, 211); + border-style: solid; + cursor: pointer; + width: 27px; + height: 27px; + display: inline-block; + padding: 0px; + border-width: 0px; + border-radius: 0px; + } + + .hamburger-button .hamburger-bar { + margin: 3px auto; + width: 65%; + height: 3px; + background-color: rgb(243, 243, 243); + } + + .hamburger-button > div { + display: table; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + } + + .hamburger-menu-close-button { + font-family: 'Arial', sans-serif; + font-size: 30px; + text-align: right; + color: rgb(255, 255, 255); + padding: 5px 10px; + cursor: pointer; + } + + #imPageExtContainer.darken::after { + width: 100%; + height: 100%; + background-color: rgb(0, 0, 0); + opacity: 0.5; + z-index: 100; + } + + #nav-sticky-container { + display: flex; + align-items: center; + } + + #imStickyBar_imObjectImage_02_wrapper { + margin-left: 12px; + } + + #nav-sticky-container .hamburger-button { + margin-left: auto; + margin-right: 12px; + } + + .hamburger-button > div > div { + display: table-cell; + vertical-align: middle; + } + + #imStickyBarContainer { + height: 66px; + } + + #imStickyBarContainer > div { + height: 100%; + } + + #nav-sticky_wrapper { + width: 100%; + } + + #nav-top_wrapper .menu-mobile-animated { + height: 100%; + } + + #nav-sticky-container > ul { + position: fixed; + top: 0px; + bottom: 0px; + width: 160px; + border-style: solid; + border-width: 0px; + border-color: transparent; + border-radius: 0px; + overflow: visible; + z-index: 10402; + right: auto; + background-color: rgb(211, 211, 211); + visibility: visible; + display: block; + transition: all 0.5s; + left: 0px; + } + + #nav-sticky-container > ul li { + background-color: rgb(67, 67, 67); + } + + #nav-sticky-container .sub-nav-label { + background-color: rgb(87, 87, 87); + text-align: center; + } + + #nav-sticky-container > ul li .main-nav-label, #nav-sticky-container .sub-nav-label { + width: 160px; + display: table-cell; + padding: 0; + vertical-align: middle; + } + + #nav-sticky-container > ul.hidden { + left: -160px; + visibility: hidden; + } + + #imStickyBarObjects .main-nav-label { + padding: 0; + } + + .nav-level > .open-bottom { + opacity: reset; + display: none; + visibility: visible; + } + + .nav-level:hover > .open-bottom { + display: block; + } + + /* Hamburger button style */ + #nav-top .hamburger-button {cursor: pointer; width: 27px; height: 27px; display: inline-block; vertical-align: top; padding: 0; border-width: 0px 0px 0px 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; + background-color: rgba(67, 67, 67, 1);background-image: none;border-color: rgba(211, 211, 211, 1) rgba(211, 211, 211, 1) rgba(211, 211, 211, 1) rgba(211, 211, 211, 1);border-style: solid;} + #nav-top .hamburger-button > div { display: table; width: 100%; height: 100%; position: relative; z-index: 1; } + #nav-top .hamburger-button > div > div { display: table-cell; vertical-align: middle; } + #nav-sticky .hamburger-button {cursor: pointer; width: 31px; height: 31px; display: inline-block; vertical-align: top; padding: 0; border-width: 0px 0px 0px 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; + background-color: transparent;background-image: none;border-color: rgba(211, 211, 211, 1) rgba(211, 211, 211, 1) rgba(211, 211, 211, 1) rgba(211, 211, 211, 1);border-style: solid; } + #nav-sticky .hamburger-bar { margin: 3px auto; width: 65%; height: 3px; background-color: rgba(243, 243, 243, 1); } + #nav-sticky .hamburger-button > div { display: table; width: 100%; height: 100%; position: relative; z-index: 1; } + #nav-sticky .hamburger-button > div > div { display: table-cell; vertical-align: middle; } +} + +@media (min-width: 1150px) { + .hamburger-button { + display: none; + } + + #nav-top_wrapper { position: absolute; top: 155px; left: 200px; width: 947px; height: 38px; text-align: center; z-index: 1003; } + #nav-top { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; } + /* Main menu background */ + #nav-top-container { border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; width: 100%; box-sizing: border-box; background-color: transparent; padding: 0px 0px 0px 0px; display: inline-table;} + #nav-top-container > ul:after {content: '';display: table;clear: both; } + /* Main menu button size and position */ + #nav-top-container > ul > li {position: relative;margin-left: 2px; margin-top: 0px; display: inline-block; vertical-align: top; } + #nav-top .hamburger-bar { margin: 3px auto; width: 65%; height: 3px; background-color: rgba(243, 243, 243, 1); } + /* Main menu separator button style */ + #nav-top .nav-level { cursor: default; } + #nav-top-menu-opened .nav-level { cursor: default; } + #nav-top { text-align: right;} + /* Level menu background */ + #nav-top ul ul { border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-color: transparent; } + /* Level menu button size and position */ + #nav-top ul ul li {position: relative;margin-bottom: 0px; display: inline-block; vertical-align: top; } + /* Multiple column menu buttons position */ + #nav-top .multiple-column > ul {max-width: 140px;} + #nav-top ul ul li:last-child {margin-bottom: 0;} + /* Level menu current button style */ + #nav-top ul ul { z-index: 2; }/* Level menu show/hide directives */ + #nav-top .multiple-column {position: absolute; z-index: 2;left: 0; display: none; } + #nav-top .multiple-column > ul {position: static; + display: inline-block;vertical-align: top;} + #nav-top .multiple-column > ul > li {display: block;} + #nav-top-container > ul > li > ul {position: absolute; + top: 27px; + } + #nav-top-container > ul > li > ul.open-bottom { left: 0; } + #nav-top-container > ul > li > ul.open-left { right: 140px; } + #nav-top-container > ul > li > ul.open-right { left: 140px; } + #nav-top-container > ul > li > ul ul, #nav-top-container .multiple-column > ul > li ul {position: absolute; + top: 0; + } + #nav-top-container > ul > li > ul ul.open-left, #nav-top-container .multiple-column > ul > li ul.open-left{ right: 140px; } + #nav-top-container > ul > li > ul ul.open-right, #nav-top-container .multiple-column > ul > li ul.open-right{ left: 140px; } + #nav-top-container > ul > li:nth-child(6n+1) { + margin-left: 0; + clear: left; + } + #nav-top-container > ul > li:nth-child(n+7) { + margin-top: 2px; + } + #nav-top-menu-opened { display: none; } + #nav-top .hamburger-component { display: none; } + + /* Level menu current button style */ + #nav-sticky { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; text-align: right; } + /* Main menu background */ + #nav-sticky-container > ul:after {content: '';display: table;clear: both; } + /* Main menu separator button style */ + #nav-sticky .nav-level { cursor: default; } + #nav-sticky-menu-opened .nav-level { cursor: default; } + /* Level menu background */ + #nav-sticky ul ul { border-style: solid; border-width: 0px 0px 0px 0px; border-color: transparent transparent transparent transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-color: transparent; z-index: 2; } + /* Level menu button size and position */ + #nav-sticky ul ul li {position: relative;margin-bottom: 0px; display: inline-block; vertical-align: top; } + /* Multiple column menu buttons position */ + #nav-sticky .multiple-column > ul {max-width: 145px; position: static; display: inline-block;vertical-align: top;} + #nav-sticky ul ul li:last-child {margin-bottom: 0;} + /* Level menu current button style */ + #nav-sticky .multiple-column {position: absolute; z-index: 2;left: 0;} + #nav-sticky .multiple-column > ul > li {display: block;} + #nav-sticky-container > ul > li > ul {position: absolute; + top: 31px; + } + #nav-sticky-container > ul > li > ul.open-bottom { left: 0; } + #nav-sticky-container > ul > li > ul.open-left { right: 145px; } + #nav-sticky-container > ul > li > ul.open-right { left: 145px; } + #nav-sticky-container > ul > li > ul ul, #nav-sticky-container .multiple-column > ul > li ul {position: absolute; + top: 0; + } + #nav-sticky-container > ul > li > ul ul.open-left, #nav-sticky-container .multiple-column > ul > li ul.open-left{ right: 145px; } + #nav-sticky-container > ul > li > ul ul.open-right, #nav-sticky-container .multiple-column > ul > li ul.open-right{ left: 145px; } + #nav-sticky .hamburger-component { display: none; } + #imStickyBar_imObjectImage_02_wrapper { position: absolute; top: 2px; left: 20px; width: 110px; height: 70px; text-align: center; z-index: 1003; overflow: hidden; } + #imStickyBar_imObjectImage_02_wrapper img {-webkit-clip-path: inset(0 0 -9.375% 0);clip-path: inset(0 0 -9.375% 0);} + #imStickyBar_imCell_2 { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; -ms-grid-rows: 100%; grid-template-rows: 100%; } + #imStickyBar_imObjectImage_02 { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; } + #imStickyBar_imCellStyleBorders_2 { + left: 0px; + right: 0px; + border-top: 0; + border-bottom: 0; + border-left: 0; border-right: 0; } + + #imStickyBarObjects .main-nav-label { + background: transparent; + font-weight: normal; + width: 141px; + height: 31px; + padding: 0px 2px; + } + + #nav-sticky_wrapper { + position: absolute; + top: 18px; + left: 140px; + width: 992px; + height: 30px; + text-align: center; + z-index: 1002; + } + + #nav-sticky-container { + border-style: solid; + border-width: 0px; + border-color: transparent; + border-radius: 0px; + width: 100%; + box-sizing: border-box; + background-color: transparent; + padding: 0px; + display: inline-table; + } + + #nav-sticky-container > ul::after { + content: ""; + display: table; + clear: both; + } + + #nav-sticky-container > ul > li { + position: relative; + margin-left: 0px; + margin-top: 0px; + display: inline-block; + vertical-align: top; + } + + #nav-sticky-container > ul > li:nth-child(6n+1) { + margin-left: 0px; + clear: left; + } + + #nav-sticky-container > ul > li:nth-child(n+7) { + margin-top: 0px; + } + + .nav-label-active .main-nav-label { + color: rgb(255, 0, 0); + } +} \ No newline at end of file diff --git a/templates/partials/header.html.twig b/templates/partials/header.html.twig index 4b1ac3c..28a746c 100644 --- a/templates/partials/header.html.twig +++ b/templates/partials/header.html.twig @@ -1,7 +1,7 @@ {% macro menu(menuid,pages) %}