After watching a tutorial on implementing a custom Navbar toggler button in Bootstrap 5, I decided to try it out myself. However, I encountered an issue with the spacing between the three bars that make up the toggler button - the spacing looked different in various browsers.
Through trial and error, I discovered that setting the margin-top to -15px in
.navbar-toggler.collapsed .top-barmargin-top to 15px in .navbar-toggler.collapsed .bottom-barView the Navbar in Chrome, Firefox
However, these values did not work well in Safari, where the bars had too much spacing between them (see screenshot below).
View the Navbar in Safari
I'm wondering if there is a way to optimize the vertical spacing between the bars across different browsers. I'm still relatively new to web development, so any guidance from the community would be greatly appreciated. Thank you!
Here is the code snippet:
/* "./static/css/styles_navbar_toggler.css" */
.navbar-toggler {
margin-right: 10px;
width: 20px;
height: 20px;
position: relative;
transition: .5s ease-in-out;
}
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggerl:active,
.navbar-toggler-icon:focus {
outline: none;
box-shadow: none;
border: 0;
}
.navbar-toggler span {
margin: 0;
padding: 0;
}
.toggler-icon {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #9b9d9e;
border-radius: 1px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.middle-bar {
margin-top: 0px;
}
/* When toggler is clicked */
.navbar-toggler .top-bar {
margin-top: 0px;
transform: rotate(135deg);
}
.navbar-toggler .middle-bar {
opacity: 0;
filter: alpha(opacity=0);
}
.navbar-toggler .bottom-bar {
margin-top: 0px;
transform: rotate(-135deg);
}
/* When navbar is collapsed */
.navbar-toggler.collapsed .top-bar {
margin-top: -15px;
transform: rotate(0deg);
}
.navbar-toggler.collapsed .middle-bar {
opacity: 1;
filter: alpha(opacity=100);
}
.navbar-toggler.collapsed .bottom-bar {
margin-top: 15px;
transform: rotate(0deg);
}<!DOCTYPE html>
<html lang="en>
...
</html>