I'm facing an issue with my hamburger menu where it jumps below the icon when clicked. I've tried adjusting heights and removing fixed values but it didn't help. I want the collapsed menu to smoothly appear below the icon without any jumping. Here is the code snippet:
*, ::before, ::after {
box-sizing: border-box;
}
:root {
--blue: #3a2eb6;
--white: #fff;
--red: #cd3f33;
}
html{
font-size: 1em;
}
nav{
background: var(--white);
}
nav .logo{
background: url("../images/logo-mobile.jpg") no-repeat 0 0/contain transparent;
display: block;
overflow: hidden;
width: 13.6875rem;
height: 2.875rem;
}
nav ul li a{
color: var(--blue);
}
nav ul li{
margin: 0 0.25rem;
}
nav div.sign-in{
display: none;
margin: 0 0.25rem;
}
button.navbar-toggler span i.menu-toggler{
color: var(--red);
}
@media screen and (min-width: 768px)
{
nav .logo{
width: 17.125rem;
height: 3.5625rem;
}
nav ul li.sign-in-mobile a{
display: none;
}
nav div.sign-in{
background-color: var(--blue);
padding: 0 1.5rem;
display: block;
margin-left: 15rem;
}
nav div.sign-in a{
color: var(--white);
}
#bootstrap-override .navbar-nav{
flex-direction: row;
justify-content: flex-end;
border-bottom: .1rem solid var(--red);
}
}
@media screen and (min-width: 992px)
{
#bootstrap-override .navbar-expand-lg .navbar-toggler{
display: none;
}
nav .logo{
width: 24.625rem;
height: 5.25rem;
}
#bootstrap-override .navbar-nav{
border: none;
margin-left: 2rem;
}
nav div.sign-in{
order: 1;
margin: 0 0.25rem;
white-space: nowrap;
}
}
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="description: goes here" name="description">
<meta content="HTML, CSS, XML, JavaScript" name="keywords">
<meta content="Twisted Yogurt" name="author">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Home</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body id="bootstrap-override">
<header>
<nav class="navbar navbar-expand-lg">
<div class="container justify-content-space-between">
<a class="navbar-brand" href="index.html">
<div class="logo"></div></a>
<div class="sign-in">
<a class="nav-link" href="#">Sign In</a>
</div><button aria-controls="myTogglerNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler d-lg-none" data-target="#myTogglerNav" data-toggle="collapse" type="button"><span><i class="fa fa-bars menu-toggler"></i></span></button>
<div class="collapse navbar-collapse" id="myTogglerNav">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">Menu</a>
<ul aria-labelledby="nav-link" class="dropdown-menu">
<li>
<a href="#">Froyo</a>
</li>
<li>
<a href="#">Smoothies</a>
</li>
<li>
<a href="#">Boba</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Build</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Community Recipes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item sign-in-mobile">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50323f3f24232422312010647e657e63">[email protected]</a>/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>