I am creating an animated html, css and jacavaript nav toggler for a therapy website which I have finally got working on all devices-but I am having trouble making it smaller without affecting the alignment of the cross after activating the toggler. This is my code:
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Bootstrap CSS-5.3.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!--Font Awesome-->
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css">
<!-- Latest jQuery library for plugins that require it-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style type="text/css">
/*=========================Header========================*/
/*Navbar*/
.navbar{
position: absolute;
width: 100%;
top: 0;
}
/*hero banner*/
.hero-image{
/* Set a specific height */
height: 267px;
background-color:green;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
/*Hamburger toggler*/
button {
cursor: pointer;
background: none;
border: none;
outline: none;
appearance: none;
}
.btns {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.btns_item {
margin: 0 20px;
text-align: center;
}
/* ------------------------------------------------------------ * #02 * ------------------------------------------------------------ */
.btnMenu02 {
width: 100px;
height: 100px;
background-color: #000;
}
.btnMenu02 > span {
display: block;
transition: all 0.4s ease-in-out;
}
.btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after {
display: block;
width: 70%;
height: 8px;
margin: 12px auto;
content: '';
background-color: #fff;
border-radius: 4px;
transition: all 0.2s ease-in-out;
}
.btnMenu02.is-open > span {
transform: rotate(180deg);
}
.btnMenu02.is-open > span > span {
opacity: 0;
}
.btnMenu02.is-open > span::before {
transform: translateY(20px) rotate(-45deg);
}
.btnMenu02.is-open > span::after {
transform: translateY(-20px) rotate(45deg);
}
/*//Hamburger toggler*/
</style>
</head>
<body>
<header>
<div class="hero-image">
<img class="hero-image" src="assets/images/banner.png" alt="">
<div class="hero-text">
<h2 style="font-size: 20px">Natural Therapist</h2>
<button>Hire me</button>
</div>
</div>
<!--Nav-->
<nav class="navbar navbar-default navbar-expand-lg ">
<div class="container-fluid">
<a class="navbar-brand " href="#">Logo</a>
<button class="navbar-toggler btnMenu02 js-btnMenu" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarTogglerDemo" aria-expanded="false" aria-label="Toggle navigation">
<span><span></span></span>
</button>
<div class="collapse navbar-collapse " id="navbarToggler">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<!--/Nav-->
</header>
<script type="text/javascript">
$(function() {
$('.js-btnMenu').on('click', function() {
$(this).toggleClass('is-open');
});
});
</script>
<!--//Header
==================================-->
<!-- javascript (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!--personal javascripts-->
<script src="assets/js/main.js"></script>
</body>
</html>
Basically, I am wanting this hamburger toggler to be of a smaller size suitable for a website or mobile. After much research and modifying the codes, I just find that altering the width and height of the .btnMenu02 abd changing the height of the span linesof the .btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after makes the cross icon kind of wonky and out of alignment. Is there a trick to resizing this toggler and making it smaller without affecting the alignment of the cross icon?
If you could provide screenshots of how it looks after you've attempted, that would help.
However, I have changed the following with some success:
.btnMenu02 {
width: 50px;
height: 50px;
background-color: #000;
}
.btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after {
display: block;
width: 90%;
height: 4px;
margin: 6px auto;
content: '';
background-color: #fff;
border-radius: 4px;
transition: all 0.2s ease-in-out;
}
The key points that affected the weird look after resize was the margin: 12px auto; as this affected the lines escaping the box.
Also, since it was made smaller, the lines were too short in width so increasing it to 90% made it feel more in place.
I think to achieve whatever size you're after, you should adjust the value of the height and margin in proportion to your width and height of the background.
Full example:
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Bootstrap CSS-5.3.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!--Font Awesome-->
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css">
<!-- Latest jQuery library for plugins that require it-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style type="text/css">
/*=========================Header========================*/
/*Navbar*/
.navbar{
position: absolute;
width: 100%;
top: 0;
}
/*hero banner*/
.hero-image{
/* Set a specific height */
height: 267px;
background-color:green;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
/*Hamburger toggler*/
button {
cursor: pointer;
background: none;
border: none;
outline: none;
appearance: none;
}
.btns {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.btns_item {
margin: 0 20px;
text-align: center;
}
/* ------------------------------------------------------------ * #02 * ------------------------------------------------------------ */
.btnMenu02 {
width: 50px;
height: 50px;
background-color: #000;
}
.btnMenu02 > span {
display: block;
transition: all 0.4s ease-in-out;
}
.btnMenu02 > span > span, .btnMenu02 > span::before, .btnMenu02 > span::after {
display: block;
width: 90%;
height: 4px;
margin: 6px auto;
content: '';
background-color: #fff;
border-radius: 4px;
transition: all 0.2s ease-in-out;
}
.btnMenu02.is-open > span {
transform: rotate(180deg);
}
.btnMenu02.is-open > span > span {
opacity: 0;
}
.btnMenu02.is-open > span::before {
transform: translateY(20px) rotate(-45deg);
}
.btnMenu02.is-open > span::after {
transform: translateY(-20px) rotate(45deg);
}
/*//Hamburger toggler*/
</style>
</head>
<body>
<header>
<div class="hero-image">
<img class="hero-image" src="assets/images/banner.png" alt="">
<div class="hero-text">
<h2 style="font-size: 20px">Natural Therapist</h2>
<button>Hire me</button>
</div>
</div>
<!--Nav-->
<nav class="navbar navbar-default navbar-expand-lg ">
<div class="container-fluid">
<a class="navbar-brand " href="#">Logo</a>
<button class="navbar-toggler btnMenu02 js-btnMenu" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarTogglerDemo" aria-expanded="false" aria-label="Toggle navigation">
<span><span></span></span>
</button>
<div class="collapse navbar-collapse " id="navbarToggler">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a clas