#nav-box { display: none; position: relative; z-index: 1; box-shadow: 4px 4px 10px -4px #3a3a3a3a; } .pre-header-nav{ padding: 10px; font-weight: 700; font-size: 1.5rem; letter-spacing: -1px; color: #6B4F38; display: block; background: #F8F4EB; text-align:center; } #main-nav{ background: #fff; background: var(--body-bg, #fff); width: 100%; overflow:hidden; flex-grow: 1; } #main-nav .link{ cursor: pointer; white-space: nowrap; } #main-nav, #main-nav ul{ list-style:none; margin:0; padding: 0; } #main-nav .sub-menu{ max-height:0; overflow:hidden; opacity:0; pointer-events:none; z-index:100; white-space:nowrap; text-align: left; background: #fff; background: var(--widget-bg, #f3ecdd); padding: 0; margin:0; border-radius: 0 6px 6px 6px; box-shadow: 4px 4px 10px -4px #3a3a3a3a; transition: opacity .3s ease, max-height .3s ease; } #main-nav .menu-item{ text-align: left; break-inside: avoid; } #main-nav .menu-item .fa{ display: inline-block; width: 1.5em; text-align:center; } #main-nav .menu-item>.link, #main-nav .menu-item>a{ display:block; padding: .5em; color: #3a3a3a; color: var(--text-color, #3a3a3a); opacity: .9; text-decoration: none; } #main-nav .menu-item.active-menu-item .sub-menu{ max-height:100vh; opacity:1; pointer-events:all; } #main-nav .menu-item.active-menu-item>.link, #main-nav .menu-item.active-menu-item>a{ color: #fff; background: linear-gradient(to top, #76b347, #5e9e2e); text-decoration: none; } @media(max-width:768){ #nav-box { position: fixed; top: .75cm; z-index: 10; left:0; right:0; } #main-nav{ font-size: 19px; } #main-nav .menu-item.active-menu-item .sub-menu{ max-height:100vh; opacity:1; pointer-events:all; } #main-nav .menu-item.active-menu-item>.link, #main-nav .menu-item.active-menu-item>a{ color: #fff; background: linear-gradient(to top, #76b347, #5e9e2e); text-decoration: none; } } @media(min-width:769px){ #nav-box { background: #f3ecdd; background: var(--widget-bg, #f3ecdd); box-shadow: none; max-height: calc(100vh - .75cm); z-index: 1000; } #main-nav{ display: grid; grid-template-columns: 1fr 1fr 1fr; position: static; max-height:unset; overflow:visible; gap:8px; margin: auto; background: var(--widget-bg, #f3ecdd); } #main-nav .menu-item{ position:relative; } #main-nav .sub-menu{ background: var(--body-bg, #fff); position: absolute; left:0; } #main-nav .menu-item>.link, #main-nav .menu-item>a{ padding: .25em .5em .33em; } } @media(min-width:1000px){ #nav-box { display: block; } #main-nav{ font-size: 14px; display:flex; justify-content:center; } } @media(hover:hover), (min-width: 1000px){ #main-nav .menu-item:hover .sub-menu{ max-height:100vh; opacity:1; pointer-events:all; } #main-nav .menu-item:hover>.link, #main-nav .menu-item:hover>a{ color: #fff; background: linear-gradient(to top, #76b347, #5e9e2e); text-decoration: none; } }