Wie füge ich dem Hamburgermenü Animation hinzu? Bootstrap 4?

Question

Ich arbeite an einer Website, auf der ich eine statische Animation von Bootstrap zu meiner statischen Navigationsleiste hinzufügen möchte. Ich möchte, dass die 3 horizontalen Balken zu einem X wechseln, wenn die Schaltfläche im mobilen Ansichtsfenster umgeschaltet wird.

Hinweis: Ich bin mit Bootstrap 4, nicht 3. Einige BS3 Klassen funktionieren nicht in BS4

Dies ist, was ich zu erreichen versuchen: example. Allerdings habe ich mehrere Tutorials gefunden, aber ich habe damit zu kämpfen. Der Grund dafür ist, dass all diese Tutorials auf BS3 basieren. BS3 verwendet die navbar-toggle-Klasse, aber BS4 verwendet die navbar-toggler-Klasse. Es ist wichtiger Unterschied, da die BS4-Version ein Sichtgerät in CSS enthält:

.navbar-toggler { 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); 
    border-color: rgba(0,0,0,.1); 
} 

Und im bootstrap.min.css die navbar-toggler-Klasse für 11 Mal verwendet wird. Wenn ich also diese Klasse modifiziere, wird sie (wahrscheinlich) brechen.

HTML of menu: 
<div class="container"> 
     <div class="row hidden-lg-up"> 
      <div class="wrapper-right"> 
       <a href="#"><img src="img/placeholders/225x50.png" alt="Logo Company Mobile" class="mobile-only" /></a> 
      </div> 
     </div> 
     <div class="row"> 
      <nav class="navbar navbar-light navbar-full"> 
       <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> 
       <div class="collapse navbar-toggleable-md" id="navbarResponsive"> 
        <a class="navbar-brand vc-parent" href="#"> 
         <img src="img/placeholders/250x50.png" alt="Logo Company Desktop" class="img-fluid desktop-only" /> 
        </a> 
        <ul class="nav navbar-nav navbar-right"> 
         <li class="nav-item active align-middle"> 
          <a class="nav-link" href="#">Home</a> 
         </li> 
         <li class="nav-item align-middle"> 
          <a class="nav-link" href="#">Item</a> 
         </li> 
         <li class="nav-item align-middle"> 
          <a class="nav-link" href="#">Item</a> 
         </li> 
        </ul> 
       </div> 
      </nav> 
     </div> 
    </div> 

Kann mir jemand in die richtige Richtung zeigen?

Answer 1

ändern .navbar-toggler-Symbol Hintergrund, wenn das Menü

background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8l20 16M4 24L24 8'/%3E%3C/svg%3E"); 

zu

geöffnet