body { opacity: 0; animation: fadeIn 0.5s ease-in-out forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .nav-menu .cart-icon { display: inline-block; background: url('https://dannyholmanmedia.com/wp-content/uploads/2023/11/Icons-1.png') no-repeat; width: 30px; height: 30px; background-size: contain; text-indent: 35px; font-family: 'montserrat'; font-weight: 700; } header { position: fixed; height: 140px; transition: 0.5s ease; width: 100%; top: 0px; background-color: black; padding-top: 0px; z-index: 999; padding-bottom: 0px; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; align-items: center; } header #site-logo { display: flex; align-items: center; height: 100%; } header #header-logo { max-width: 100%; width: 150px; height: auto; padding-left: 0px; transition: width 0.5s ease; padding-top: 10px; } header.small { height: 50px; background-color: #515151; } header.small img { width: 10vw; } header.small #site-logo { display: flex; align-items: center; height: 100%; } header.small #header-logo { max-width: 100%; width: 60px; height: auto; padding-left: 0px; } @media (max-width: 900px) { header { position: fixed; top: 0px; height: 130px; transition: 0.5s ease; } header.small { position: fixed; top: 0px; height: 90px; } header.small #site-logo { display: flex; align-items: center; height: 100%; } header.small #header-logo { max-width: 100%; width: 90px; height: auto; padding-left: 0px; } } ul { list-style: none; padding: 0; margin: 0; } a { color: white; text-decoration: none; position: center; } .navbar { text-align: center; font-family: 'Julius Sans One', sans-serif; } #site-menu { justify-content: center; } .nav-menu { display: flex; justify-content: space-between; width: 100%; text-align: center; font-family: 'Julius Sans One', sans-serif; white-space: nowrap; align-items: center; } .nav-menu li { position: relative; margin: 5px 3vw; font-size: 15px; } .nav-menu a::before { content: ""; position: absolute; width: 0; height: 4px; background-color: transparent; bottom: -6px; left: 0; transform-origin: left; transition: width 0.6s ease; } .nav-menu a:hover::before { width: 100%; transform: translateX(0); background-color: #4A1521; } .nav-link { transition: 0.3s ease; } .nav-link.hover { text-decoration: underline; } .hamburger { display: none; flex-direction: column; cursor: pointer; position: absolute; z-index: 999; align-items: center; padding-bottom: 30px; } .bar { display: block; width: 30px; height: 3px; margin: 5px; transition: all 0.3s ease-in-out; background-color: white; border-radius: 300px; } @media (max-width: 900px) { .hamburger { display: block; right: 20px; top: 20px; } } .bar { display: block; width: 30px; height: 3px; margin: 5px; transition: all 0.3s ease-in-out; background-color: white; border-radius: 300px; } .page-title { padding-top: 15px; padding-bottom: 15px; margin-bottom: 15px; position: relative; animation: fadeIn 4s ease-out; display: flex; justify-content: center; font-size: 60px; padding-bottom: 60px; } .contact-content { padding-left: 300px; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @media (max-width: 900px) { #header-logo { position: sticky; margin: 0; align-items: center; display: flex; flex-direction: row; } .hamburger { display: block; cursor: pointer; position: relative; z-index: 999; } .hamburger.active .bar:nth-child(2) { opacity: 0; } .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(315deg); } .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-315deg); } .nav-menu a { position: relative; padding: 20px; text-decoration: none !important; transition: color 0.3s ease; font-size: 35px; } .nav-menu a::before { content: ""; position: absolute; width: 0; height: 4px; background-color: transparent; bottom: -6px; transform: translateX(-50%) translateY(50%); transform-origin: left; transition: width 0.3s ease; } .nav-menu a:hover { color: #000000 !important; } .nav-menu a:hover::before { width: 100%; transform: translateX(-50%) translateY(50%); background-color: transparent; } .nav-menu { position: fixed; right: -200%; top: 0; gap: 0; flex-direction: column; width: 100%; height: 100%; text-align: center; color: black; transition: right 0.5s ease-in-out; background: #4a1521
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter