/* COMMON */ #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; } } /* ZNAKOMSTVA-specific */ .help-btn { background: #4F99E3; height: 25px; color: #fff!important; border-radius: 40px; padding: 3px 8px 3px 8px; line-height: 1.6; font-size: .8em; text-decoration: none!important; } .main-menu-wrap{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 2px 0 0; } .main-menu-btn { position: relative; display: inline-block; width: 41px; height: 41px; overflow: hidden; top: -2px; cursor: pointer; } /* hamburger icon */ .main-menu-btn-icon { position: absolute; top: 0px; left: 2px; padding: 5px; height: 23px; width: 23px; color: #77633d;; -webkit-transition: all 0.25s; transition: all 0.25s; border-radius: 50px; border: 1px solid; } /* hide menu state checkbox (keep it visible to screen readers) */ #main-menu-state { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; clip: rect(1px,1px,1px,1px); } /* hide the menu in mobile view */ #main-menu-state:not(:checked) ~ #nav-box { max-height: 0px; } #main-menu-state:checked ~ #nav-box { max-height: 100vh; } #nav-box{ width: 100%; display: block!important; position: static!important; overflow: hidden; transition: max-height .5s ease; } #main-nav .sub-menu .menu-item .fa{ display: none!important; } @media (min-width: 769px) { .main-menu-wrap{ justify-content: center; align-items: center; gap: 2em; } /* hide the button in desktop view */ .main-menu-btn { position: absolute; top: -99999px; } #nav-box{ width: auto; overflow: visible; max-height: unset!important; background: transparent!important; display: block!important; } #main-nav{ border-radius: 5em; padding-right: .5em; } .help-btn{ order: 10; } #bookmarks { display: block !important; } } .layout_core_menu_main .navbar-toggle .icon-bar{ transition: opacity .3s ease, transform .5s ease; transform-origin: 12% 50%; } .layout_core_menu_main:has(.nav_cont[style*="display: block"]) .navbar-toggle .icon-bar:first-of-type{ transform: rotate(45deg); } .layout_core_menu_main:has(.nav_cont[style*="display: block"]) .navbar-toggle .icon-bar:nth-of-type(2){ opacity: 0; } .layout_core_menu_main:has(.nav_cont[style*="display: block"]) .navbar-toggle .icon-bar:last-of-type{ transform: rotate(-45deg); }