Header with Hamburger Menue
CODE
×
HTML
<header class='sticky v4'> <svg class='logo' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' x='0' y='0' version='1.1' viewBox='0 0 103.7 17.2' width='0' height='0'><path d="M0 17.2V0h4.7v13.1h5.8v4H0zM13.2 17.2 19.1 0H25l5.9 17.2h-4.7l-.9-3.1h-6.6l-.9 3.1h-4.6zm6.5-6.5h4.7L22.7 5c0-.1-.1-.4-.2-.8-.1-.5-.3-1-.4-1.5l-.3 1.2c-.1.4-.2.8-.3 1.1l-1.8 5.7zM34.9 17.2V0h4.5l6.5 8.8c.2.2.4.6.6 1.1.3.6.6 1.3.9 1.9-.1-.9-.2-1.5-.2-1.9 0-.6-.1-1.1-.1-1.5V0h4.5v17.2h-4.5l-6.5-8.9c-.1-.1-.3-.5-.6-1.1-.3-.5-.6-1.1-.9-1.9.1.6.2 1.2.2 1.9v10h-4.4zM60.2 17.2V4.1h-3.8V0h12.4v4.1H65v13.1h-4.8zM71.4 17.2 77.3 0h5.9l5.9 17.2h-4.7l-.9-3.1H77l-.9 3.1h-4.7zm6.6-6.5h4.7L81 5c0-.1-.1-.4-.2-.8-.1-.5-.3-1-.4-1.5-.2.5-.3.9-.4 1.3-.1.4-.2.8-.3 1.1L78 10.7zM93.2 17.2V0h4.7v13.1h5.8v4H93.2z" /></svg> <div class='menu-open-wrapper'><svg class='menue-icon desktop' version='1.1' id='menu' width='40' height='40' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 640 640' style='enable-background:new 0 0 640 640;' xml:space='preserve'> <rect y="0" fill="none" width="640" height="640"></rect> <rect id="hm1" x="64" y="160" class="hm-line" fill="currentColor" width="512" height="32"></rect> <rect id="hm2" x="64" y="304" class="hm-line" fill="currentColor" width="512" height="32"></rect> <rect id="hm3" x="64" y="448" class="hm-line" fill="currentColor" width="512" height="32"></rect> </svg> <div class='offcanvas-close-icon-wrapper'> <div class='offcanvas-close-icon'> <span></span> <span></span> </div> </div></div> </header>
CSS
:root { --height-header: 120px; } header { height: var(--height-header); color: var(--fc1); border-bottom: 1px solid var(--lc3); background-color: var(--bc2); position: absolute; z-index: 50; display: flex; align-items: center; justify-content: space-between; width: 100vw !important; margin-bottom: 0; padding-top: 20px; padding-bottom: 20px; overflow: visible !important; backdrop-filter: blur(6px) contrast(0.9); } @media screen and (max-width: 991px), screen and (max-height: 771px) { :root { --height-header: 90px; } } @media screen and (max-width: 575px), screen and (max-height: 389px) { :root { --height-header: 60px; } header { padding-top: 10px; padding-bottom: 10px; backdrop-filter: none; } } header.sticky + .container { margin-top: 0; } header.sticky + .container.video-block-full, header.sticky + .container.carousel-block-full { margin-top: 0; } body:not(.sg_elements) .sticky { position: fixed; z-index: 999; top: 0; transition: top 0.25s ease-in-out; } body:not(.sg_elements) header.sticky { backdrop-filter: blur(6px) contrast(0.9) !important; } body:not(.sg_elements) header.hide { top: calc(var(--height-header) * -1); } svg.logo { margin-top: 0px; margin-right: 0px; margin-bottom: 3px; margin-left: 0px; width: 188px; height: auto; }
JS
Header with Hamburger Menue
Last Edit: Nov 4, 2023, 2:12pm
×