/* hh-mobile-drawer.css Mobile drawer for Humphrey Hawksley (Author Pro) */ /* Basic reset for our mobile UI */ .hh-mobile-toggle { position: relative; z-index: 99998; background: transparent; border: 0; padding: 12px; display: none; /* shown only on mobile via media query */ } .hh-mobile-toggle .hh-bar { display: block; width: 28px; height: 3px; margin: 5px 0; background: silver; transition: transform .25s ease, opacity .25s ease; } /* Mobile Drawer */ .hh-mobile-drawer { position: fixed; top: 0; right: 0; width: 320px; max-width: 86%; height: 100vh; background: silver; box-shadow: -8px 0 30px rgba(0,0,0,0.15); transform: translateX(100%); transition: transform .32s cubic-bezier(.2,.9,.2,1); z-index: 99997; overflow-y: auto; -webkit-overflow-scrolling: touch; will-change: transform; } /* Drawer inner spacing */ .hh-mobile-drawer-inner { padding: 1rem 0 2rem 0; } /* Close button inside drawer */ .hh-mobile-close { background: transparent; border: 0; font-size: 2rem; line-height: 1; padding: 0.5rem 1rem; float: right; } /* When drawer is open (JS toggles class 'hh-open' on ) */ body.hh-open .hh-mobile-drawer { transform: translateX(0); } /* animate hamburger into X when open */ body.hh-open .hh-mobile-toggle .hh-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } body.hh-open .hh-mobile-toggle .hh-bar:nth-child(2) { opacity: 0; } body.hh-open .hh-mobile-toggle .hh-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Menu lists */ .hh-mobile-drawer .hh-mobile-menu { list-style: none; margin: 0; padding: 0 1rem 1rem 1rem; border-bottom: 0px solid #eee; } .hh-mobile-drawer .hh-mobile-menu li { margin: 0; padding: 0; border-bottom: 1px dotted #f4f4f4; } .hh-mobile-drawer .hh-mobile-menu a { display: block; padding: 0.9rem 0; color: #890000; text-decoration: none; font-size: 1.2rem; } /* Sub-menus: collapsible control */ .hh-mobile-drawer .menu-item-has-children > a::after { content: '\25B6'; /* small triangle */ float: right; transform: rotate(0deg); transition: transform .2s ease; } /* Submenu collapsed by default */ .hh-mobile-drawer .sub-menu { display: none; padding-left: 0.75rem; } /* If parent has class .hh-sub-open, show it */ .hh-mobile-drawer .menu-item-has-children.hh-sub-open > .sub-menu { display: block; } /* MEDIA QUERIES: only show drawer toggle on small screens */ @media (max-width: 768px) { .hh-mobile-toggle { display: block; } /* keep the desktop menus visually intact but hide them (they stay reachable for screen readers) */ .nav-primary, .nav-secondary, .nav-header-right, .genesis-nav-menu { display: none !important; } } /* Desktop: hide mobile drawer UI */ @media (min-width: 769px) { .hh-mobile-drawer { display: none; } }