htmlcsscss-animationsnavbarbootstrap-5

How to standardize vertical spacing between bars in CSS-animated Bootstrap 5 Navbar toggler button across browsers

I'm trying to implement an adaptation of this animated custom Navbar toggler button in Bootstrap 5. However, the spacing between the three bars that comprise the toggler button appears different in different browsers.

I've found that margin-top of -15px in .navbar-toggler.collapsed .top-bar and margin-top of 15px in .navbar-toggler.collapsed .bottom-bar yield good spacing in Chrome and Firefox (see zoomed-in screenshots below).

Navbar in Chrome, Navbar in Firefox

However, the same values in Safari yield bars with too much spacing between them (see zoomed-in screenshot below).

Navbar in Safari

Is there a way to standardize the vertical spacing between the bars across browsers? I'm new to web development and would appreciate any help the community can provide. Thanks!

The code is below.

/* "./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">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link href="/static/css/styles_navbar_toggler.css" rel="stylesheet">
</head>

<body>
  <!-- Popper and Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

  <header>
    <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>

        <!-- For custom toggler, (a) added "collapsed d-flex d-lg-none flex-column justify-content-around" to "navbar-toggler" class, -->
        <!-- (b) replaced <span class="navbar-toggler-icon"></span> with the three lines below, and -->
        <!-- (c) defined new "navbar-toggler" class in "styles_navbar_toggler.css" -->

        <button class="navbar-toggler collapsed d-flex d-lg-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="toggler-icon top-bar"></span>
            <span class="toggler-icon middle-bar"></span>
            <span class="toggler-icon bottom-bar"></span>
          </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <main>
    Hello world
  </main>
</body>

</html>

Solution

  • Differences between browsers

    Browsers are made and developed by different companies, and therefore with different opinions what the correct 'default' should be. So some things might look different on different browsers based on these defaults.

    You're using bootstrap, and bootstrap comes with a 'css-reset' to try and set their own defaults to make sure it will look the same on all browsers. you can read more about that reboot, but in essence this should already have resolved your problem.

    Zoom and units 'rem' vs 'px'

    Zoom levels effect units differently. Browsers can apply a default zoom through a css rule like font-size: 150%.
    depending on how things are styled. zooming a px-unit will not have much effect, while zooming a rem will effect it greatly.
    see this answer for further details.
    It might be the case that your safari browser is zoomed in, or has set an increased/decreased fontsize through the OS

    Using translate instead of margin to position the bars

    You're positioning these bars using a margin-top: -15px rule. it's often favourable for performance to try and style any animated elements with the transform css rule, (like you're already doing the rotation)
    you can apply multiple transform rules like

    .navbar-toggler.collapsed .top-bar { 
  transform: rotate(0deg) translateY(-10px);
}

    here, translateY will move the element on the Y-plane.

    /* "./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 !important;
  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 {
  transform: rotate(135deg);
}

.navbar-toggler .middle-bar {
  opacity: 0;
  filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar {
  transform: rotate(-135deg);
}

/* When navbar is collapsed */

.navbar-toggler.collapsed .top-bar { 
  transform: rotate(0deg) translateY(-10px);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
  filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0deg) translateY(10px);;
}
    <!DOCTYPE html>

<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link href="/static/css/styles_navbar_toggler.css" rel="stylesheet">
</head>

<body>
  <!-- Popper and Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

  <header>
    <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>

        <!-- For custom toggler, (a) added "collapsed d-flex d-lg-none flex-column justify-content-around" to "navbar-toggler" class, -->
        <!-- (b) replaced <span class="navbar-toggler-icon"></span> with the three lines below, and -->
        <!-- (c) defined new "navbar-toggler" class in "styles_navbar_toggler.css" -->

        <button class="navbar-toggler collapsed d-flex d-lg-none flex-column justify-content-around" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="toggler-icon top-bar"></span>
            <span class="toggler-icon middle-bar"></span>
            <span class="toggler-icon bottom-bar"></span>
          </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <main>
    Hello world
  </main>
</body>

</html>