When the screen size is reduced, the hamburger icon appears, and clicking on it reveals the hamburger menu. I want to change this animation. Currently, it simply appears from the top, but I’d like to modify this. I haven’t figured out where exactly I can change this. I’ve tried using a GSAP animation, but Bootstrap overrides it and it doesn’t apply.
Here is Codepen link for my project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Video</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
<script type="module" src="/main.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<!-- Logo -->
<a class="navbar-brand" href="#">
<img src="/images/logo.png" class="image-fluid" alt="Logo">
<img src="/images/small-logo.png" alt="Small Logo" class="img-fluid small-logo">
</a>
<!-- Hamburger Icon -->
<button class="navbar-toggler custom-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<svg id="wave-svg" width="45" height="44" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="wave" d="M5.35 13C6.54 13 6.77 14 8.68 14C10.63 14 10.77 13 12.01 13C13.2 13 13.43 14 15.34 14C17.29 14 17.43 13 18.67 13C19.86 13 20.07 13.98 21.98 14V12C20.79 12 20.56 11 18.65 11C16.7 11 16.56 12 15.32 12C14.13 12 13.9 11 11.99 11C10.04 11 9.9 12 8.66 12C7.47 12 7.24 11 5.33 11C3.38 11 3.24 12 2 12V14C3.9 14 4.17 13 5.35 13ZM18.67 15C16.72 15 16.58 16 15.34 16C14.15 16 13.92 15 12.01 15C10.06 15 9.91 16 8.67 16C7.43 16 7.29 15 5.34 15C3.39 15 3.24 16 2 16V18C3.95 18 4.11 17 5.34 17C6.58 17 6.72 18 8.67 18C10.62 18 10.77 17 12.01 17C13.2 17 13.43 18 15.34 18C17.28 18 17.43 17 18.67 17C19.86 17 20.09 18 22 18V16C20.76 16 20.62 15 18.67 15ZM5.35 9C6.54 9 6.77 10 8.68 10C10.63 10 10.77 9 12.01 9C13.2 9 13.43 10 15.34 10C17.29 10 17.43 9 18.67 9C19.86 9 20.07 9.98 21.98 10V8C20.79 8 20.56 7 18.65 7C16.7 7 16.56 8 15.32 8C14.13 8 13.9 7 11.99 7C10.04 7 9.9 8 8.66 8C7.47 8 7.24 7 5.33 7C3.38 7 3.24 8 2 8V10C3.9 10 4.17 9 5.35 9Z" fill="white"/>
</svg>
</button>
<!-- Navbar Links -->
<div class="collapse navbar-collapse ml-auto" id="navbarNav">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" id="button" style="@media (min-width: 992px) {margin-left:20px;}" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="button" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" id="button" href="#">Pricing</a>
</li>
</ul>
<a href="#" class="collection">
<span id="contact-title"><b>randomtext</b></span>
</a>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="container-fluid">
<div class="row">
<!-- Left Content -->
<div class="col-lg-7 content">
<h1>
<div class="mask primary-h1">
<span class="target">text1</span>
</div>
<div class="mask">
<span>text2</span>
</div>
</h1>
</div>
<!-- Right Content -->
<div class="col-lg-4 p-0">
<div class="video-container">
<div class="vid-overlay"></div>
<video autoplay muted loop playsinline>
<source src="hands.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
@font-face {
font-family: 'Geist';
src: url('/font/Geist-Light.woff2') format('woff2');
font-weight: 300; /* or the correct weight for Geist-Light */
}
@font-face {
font-family: 'Geist';
src: url('/font/Geist-Bold.woff2') format('woff2');
font-weight: 700; /* or the correct weight for Geist-Bold */
}
body {
margin: 0;
background: #fff url('/bg.svg');
font-family: 'Geist', sans-serif;
height: 100vh; /* Remove later */
background-image: url('/images/whitee.png');
background-size: cover;
background-repeat: no-repeat;
}
/* Navbar */
.navbar {
background: transparent;
}
.navbar-brand .image-fluid {
width: 100%;
height: auto;
}
.navbar-brand .small-logo {
display: none;
}
.custom-toggler {
border: none;
outline: none;
}
.custom-toggler:focus {
outline: none;
box-shadow: none;
}
/* Menu Buttons and Links */
@media (min-width: 992px) {
a {
text-decoration: none;
color: black;
position: relative;
}
.nav-item a {
margin-right: 1.2em;
}
#button {
font-size: 1.3rem;
}
#button:hover {
color: #000;
}
#button::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: -10px;
left: 0;
background-color: #000;
transform: scaleX(0);
transition: transform 0.3s ease;
}
#button:hover::before {
transform: scaleX(1);
}
a.collection {
display: flex;
align-items: center;
margin-left: auto; /* Align collection to the right */
color: white;
font-size: 29px;
}
.email-svg {
margin-right: 50px;
margin-top: 7.5px;
}
#contact-title {
margin-right: 10px;
}
.email-svg path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
transition: stroke-dashoffset 8s ease-in-out, opacity 0s ease 8s;
/* Transition for stroke-dashoffset and opacity */
stroke: url(#paint0_linear_207_15); /* Gradient */
opacity: 1; /* Initial visibility */
}
.collection:hover .email-svg path {
stroke-dashoffset: 0;
transition: stroke-dashoffset 8s ease-in-out, opacity 0s;
/* Transition for stroke-dashoffset */
opacity: 1; /* Visible on hover */
}
.collection:hover .email-svg {
opacity: 0; /* Hide entire SVG to redraw */
transition: opacity 0s ease 8s; /* Transition for opacity */
}
}
/* Video Container */
.video-container {
position: relative;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
}
.video-container video {
top: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
min-width: 100%;
min-height: 100%;
opacity: 1;
position: relative;
}
.vid-overlay {
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .5;
background-color: gray;
}
/* Content Styles */
.content-container {
padding-top: 56px; /* Adjust for navbar height */
height: calc(100vh - 56px); /* Adjust for navbar height */
}
.col-lg-7.content {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.col-lg-7 h1 {
position: absolute;
bottom: 0;
left: 0;
width: 100%; /* Make text as wide as video */
text-align: left; /* Align text left */
color: black;
padding: 20px; /* Add padding for better appearance */
box-sizing: border-box;
z-index: 2; /* Ensure text is above overlay */
font-kerning: none;
}
.col-lg-7 span {
font-size: clamp(2rem, 7.5vw, 12rem); /* Responsive font size */
align-self: baseline;
font-weight: 10;
margin: 0;
}
.col-lg-7 .mask {
overflow: hidden;
}
.col-lg-4.p-0 {
height: 100vh; /* Full viewport height */
right: 0;
top: 0;
pointer-events: none;
overflow: hidden;
position: absolute;
}
/* Responsive Styles */
@media (max-width: 992px) {
.navbar-brand .image-fluid {
display: none;
}
.navbar-brand .small-logo {
display: block;
}
.col-lg-7.content h1 {
color: white;
}
.email-svg {
display: none;
}
.collection {
text-decoration: none;
color: black;
}
#navbarNav {
background-color: gray; /* Background color for small screen menu */
border-radius: 20px; /* Rounded corners */
}
}