nav.mobile-nav-menu { position: fixed; top: 0; left: 0; margin: 0 auto; width: 100%; height: auto; max-height: 5000vh; z-index: 99999; border-bottom: 2px solid #222; display: flex; flex-direction: column; align-items: flex-start; } .mobile-navigation-header { width: 100%; margin: 0 auto; padding: 0; text-align: center; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-content: space-between; align-items: center; align-self: flex-start; } #main-mobile-menu { position: relative; margin: 0 auto; height: 100%; overflow-y: auto; padding: 5px 5px 100px 5px; display: flex; flex-direction: column; align-items: flex-start; align-self: flex-start; } .mobile-nav-open { display: block; } .kws-mobile-menu-item { display: flex; flex-wrap: nowrap; align-items: center; } .kws-mobile-menu-item .mobile-menu-contact-links { margin-right: 5px; } #mobile-menu-button-wrapper { min-width: 50px; } .navigation-menu-button { color: inherit; font-size: 25px; cursor: pointer; padding: 10px; z-index: 500; } .kws-mobile-menu-contact-bar { padding: 10px 0 10px 10px; text-align: left; font-size: 13px; } #flexmenu { width: 100%; display: flex; flex-direction: column; align-items: flex-start; align-self: flex-start; padding: 0; margin: 0; } .sub-menu { z-index: 1234; } #flexmenu li, #flexmenu li a { width: 100%; border: 0; list-style: none; line-height: 1; display: block; position: relative; text-transform: capitalize; transition: all ease-in-out 0.05s; } #flexmenu ul { width: 100%; list-style: none; list-style-position: outside; } #flexmenu ul > li a { padding: 17px; font-size: 15px; letter-spacing: 1px; text-decoration: none; color: inherit; font-weight: 700; background: rgba(0, 0, 0, 0.10); margin-bottom: 2px; } #flexmenu ul li a:hover { background: rgba(0, 0, 0, 0.10); } #flexmenu ul { padding: 0 0 0 10px; } #flexmenu ul li.has-sub > a {} #flexmenu ul li.has-sub > a:after {} #flexmenu ul ul li.has-sub > a:after {} #flexmenu > ul > li.has-sub > a:before {} #flexmenu > ul > li.has-sub:hover > a:before {} #flexmenu ul ul li.has-sub > a:before {} #flexmenu ul ul > li.has-sub:hover > a:before {} #flexmenu ul ul li.has-sub:hover, #flexmenu ul li.has-sub ul li.has-sub ul li:hover {} #flexmenu ul ul { position: absolute; left: -9999px; width: 100%; } #flexmenu li:hover > ul { left: auto; } #flexmenu ul ul li { height: 0; transition: all 0.15s ease; } #flexmenu li:hover > ul > li { height: 35px; } #flexmenu ul ul ul { top: 0; } #flexmenu ul ul li a {} #flexmenu ul { display: none; } #flexmenu ul li, #flexmenu ul li a, #flexmenu ul ul li a { width: 100%; text-align: left; } #flexmenu ul ul li, #flexmenu li:hover > ul > li { height: auto; } #flexmenu ul ul li a {} #flexmenu ul ul ul li a {} #flexmenu ul ul, #flexmenu ul ul ul { position: relative; left: 0; width: 100%; margin: 0; text-align: left; } #flexmenu ul ul ul li.active a { border-left: none; } #flexmenu > ul > li.has-sub > ul > li.focus > a, #flexmenu > ul ul > li.has-sub > ul > li.focus > a { transition: all 0.05s ease; } #flexmenu > ul > li.has-sub > a:after, #flexmenu > ul > li.has-sub > a:before, #flexmenu ul ul > li.has-sub > a:after, #flexmenu ul ul > li.has-sub > a:before { display: none; } #flexmenu .submenu-button { position: static; z-index: 2; display: flex; justify-content: center; align-items: center; height: auto; width: 42px; padding: 0; box-sizing: border-box; cursor: pointer; background: rgba(0, 0, 0, 0.15); } #flexmenu ul ul .submenu-button { width: 42px; } #flexmenu .submenu-button:after { position: absolute; width: 8px; height: 2px; display: block; background: currentColor; content: ''; } #flexmenu ul ul .submenu-button:after { top: 50%; left: 50%; transform: translate(-50%, -50%); } #flexmenu .submenu-button.submenu-opened:after { background: currentColor; } #flexmenu .submenu-button.submenu-opened:before { display: none; } #flexmenu .submenu-button:before { position: absolute; width: 2px; height: 8px; background: currentColor; content: ''; } #flexmenu ul ul .submenu-button:before { top: 50%; left: 50%; transform: translate(-50%, -50%); } @media all and (min-width:0px) { a.kws-mobile-menu-phone { font-size: 20px; padding: 5px; } a.kws-mobile-menu-phone, a.kws-mobile-menu-whatsapp { text-decoration: none; margin-right: 5px; } .mobile-nav-logo { display: flex; align-items: center; max-width: 140px; height: auto; text-align: left; box-sizing: border-box; padding: 0; margin-left: 3px; } .mobile-nav-logo img { width: auto; height: auto; max-height: 65px; max-width: 140px; margin: 0 auto; padding: 10px; } .kws-mobile-menu-whatsapp { background: #075E54; padding: 5px; border-radius: 10px; text-align: center; } .kws-mobile-menu-whatsapp .iconify { font-size: 25px; width: auto; padding: 0; margin: 0 auto; } } @media all and (min-width:500px) { a.kws-mobile-menu-phone { font-size: 28px; padding: 10px; } a.kws-mobile-menu-phone, a.kws-mobile-menu-whatsapp { text-decoration: none; margin-right: 15px; } .mobile-nav-logo { display: flex; align-items: center; max-width: 180px; height: auto; text-align: left; box-sizing: border-box; padding: 0; margin-left: 5px; } .mobile-nav-logo img { width: auto; height: auto; max-height: 80px; max-width: 160px; margin: 0 auto; padding: 10px; } .kws-mobile-menu-whatsapp .iconify { font-size: 32px; } } .mobile-navigation-header{ position:relative; min-height:72px; padding:4px 8px; box-sizing:border-box; } .mobile-navigation-header .kws-mobile-contact-actions{ order:1; flex:1 1 0; justify-content:flex-start; min-width:0; } .mobile-navigation-header .mobile-nav-logo{ order:2; flex:0 1 auto; align-self:stretch; display:flex; align-items:center; justify-content:center; height:auto; max-width:42%; margin:0; padding:3px 4px; box-sizing:border-box; } .mobile-navigation-header .mobile-nav-logo img{ display:block; width:auto; height:100%; max-height:66px; max-width:100%; object-fit:contain; margin:0 auto; padding:0; box-sizing:border-box; } .mobile-navigation-header .kws-mobile-menu-toggle{ order:3; flex:1 1 0; justify-content:flex-end; min-width:0; } .mobile-navigation-header #mobile-menu-button-wrapper{ display:flex; align-items:center; justify-content:flex-end; min-width:46px; } .mobile-navigation-header .navigation-menu-button{ font-size:32px; padding:10px; } .mobile-navigation-header a.kws-mobile-menu-phone{ font-size:24px; padding:8px; margin-right:4px; } .mobile-navigation-header a.kws-mobile-menu-whatsapp{ padding:7px; margin-right:4px; } .mobile-navigation-header .kws-mobile-menu-whatsapp .iconify{ font-size:29px; } @media all and (min-width:500px){ .mobile-navigation-header{min-height:82px;padding:5px 12px} .mobile-navigation-header .mobile-nav-logo img{max-height:74px} .mobile-navigation-header .navigation-menu-button{font-size:36px;padding:12px} .mobile-navigation-header a.kws-mobile-menu-phone{font-size:30px;padding:10px} .mobile-navigation-header .kws-mobile-menu-whatsapp .iconify{font-size:34px} } .mobile-navigation-header.no-contact-icons .kws-mobile-contact-actions{ display:none; } .mobile-navigation-header.no-contact-icons .mobile-nav-logo{ margin-right:auto; justify-content:flex-start; max-width:min(62%, 260px); } .mobile-navigation-header.no-contact-icons .mobile-nav-logo img{ margin-left:0; margin-right:auto; } .mobile-navigation-header.no-contact-icons .kws-mobile-menu-toggle{ flex:0 0 auto; margin-left:auto; } .mobile-navigation-header.has-contact-icons .mobile-nav-logo{ justify-content:center; } #flexmenu ul li.has-sub { display: grid; grid-template-columns: minmax(0, 1fr) 42px; grid-template-rows: max-content minmax(0, auto); align-items: stretch; position: relative; margin-bottom: 2px; height: auto; } #flexmenu ul li.has-sub > a { grid-column: 1; grid-row: 1; min-width: 0; width: auto; margin: 0; padding-right: 17px; box-sizing: border-box; } #flexmenu ul li.has-sub > .submenu-button { grid-column: 2; grid-row: 1; position: static; display: flex; align-self: stretch; justify-self: stretch; width: 42px; height: auto; min-height: 0; max-height: none; margin: 0; padding: 0; border: 0; box-sizing: border-box; line-height: 0; overflow: hidden; z-index: 2; } #flexmenu ul li.has-sub > ul { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; margin: 2px 0 0; } #flexmenu ul > li a:not(.kws-nav-menu-button) { padding-top: 13px; padding-bottom: 13px; } #flexmenu ul > li > a.kws-nav-menu-button { box-sizing: border-box; margin: 3px 0; padding: 13px 17px; } @media(max-width:899px){#flexmenu li>a.kws-nav-menu-button,#flexmenu ul>li>a.kws-nav-menu-button{display:inline-flex!important;width:auto!important;max-width:calc(100% - 24px)!important;align-items:center;justify-content:center;white-space:normal}#flexmenu{padding-top:var(--kws-mobile-menu-clearance,0px)}}