Hamburger Menu

Bootstrap 5 Hamburger Menu

Responsive Hamburger button menu with Bootstrap 5. Hamburger toggle menu for mobile navigation, icon animations, sidenav, navbar templates & more.

Hamburger menu is a navigation type that serves the purpose of hiding some menu items & showing them on click. It stacks the items on top of each other in a "hamburger" fashion.


Basic example

Simple example of a hamburger menu in a navbar.

        
            

                    <nav class="navbar bg-body-tertiary">
                      <div class="container-fluid">
                        <button data-mdb-button-init class="navbar-toggler" type="button" data-mdb-collapse-init
                          data-mdb-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent"
                          aria-expanded="false" aria-label="Toggle navigation">
                          <i class="fas fa-bars"></i>
                        </button>
                      </div>
                    </nav>
                    <div class="collapse" id="navbarToggleExternalContent">
                      <div class="bg-body-tertiary shadow-3 p-4">
                        <button data-mdb-button-init data-mdb-ripple-init
                          class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                        <button data-mdb-button-init data-mdb-ripple-init
                          class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                        <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-block m-0">Link
                          3</button>
                      </div>
                    </div>




                    
        
    

Hamburger in Navbar

Explore advanced navbar options & customization in the Navbar Documentation.

Start

By default this hamburger menu will be displayed on the left side of a navbar.

MDB supports right-to-left so you can easily reverse text direction as well as this display of the navbar icon.

So this elemnt will have the hamburger menu at the start of a navbar - on left or right side depending on the text direction.

        
            

                    <nav class="navbar bg-body-tertiary">
                      <div class="container-fluid">
                        <button data-mdb-button-init class="navbar-toggler" type="button" data-mdb-collapse-init
                          data-mdb-target="#navbarToggleExternalContent2" aria-controls="navbarToggleExternalContent2"
                          aria-expanded="false" aria-label="Toggle navigation">
                          <i class="fas fa-bars"></i>
                        </button>
                      </div>
                    </nav>
                    <div class="collapse" id="navbarToggleExternalContent2">
                      <div class="bg-body-tertiary shadow-3 p-4">
                        <button data-mdb-button-init data-mdb-ripple-init
                          class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                        <button data-mdb-button-init data-mdb-ripple-init
                          class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                        <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-block m-0">Link
                          3</button>
                      </div>
                    </div>




                    
        
    

End

By default this hamburger menu will be displayed on the right side of a navbar.

You can easily push an element to the end of its parent by using the .ms-auto class which stands for margin start: auto.

Thanks to this approach this example also supports RTL text direction (so with RTL enabled it will display on the left side).

        
            

                    <nav class="navbar bg-body-tertiary">
                      <div class="container-fluid">
                        <button data-mdb-button-init class="navbar-toggler ms-auto" type="button" data-mdb-collapse-init
                          data-mdb-target="#navbarToggleExternalContent3" aria-controls="navbarToggleExternalContent3"
                          aria-expanded="false" aria-label="Toggle navigation">
                          <i class="fas fa-bars"></i>
                        </button>
                      </div>
                    </nav>
                    <div class="collapse" id="navbarToggleExternalContent3">
                      <div class="bg-body-tertiary shadow-3 p-4">
                        <button data-mdb-button-init data-mdb-ripple-init
                          class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                        <button data-mdb-button-init data-mdb-ripple-init
                          class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                        <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-block m-0">Link
                          3</button>
                      </div>
                    </div>




                    
        
    

Hamburger in Sidenav

Hamburger Button is a common way to toggle sidenav on mobile devices.

You can learn more about the sidebar component in the Side Navigation Documentation.

Start

Simple example of a sidebar hamburger menu with the side navigation element at the start of the viewport (on the left side by default).

        
            

                    <!-- Sidenav -->
                    <nav id="sidenav-1" data-mdb-sidenav-init class="sidenav" data-mdb-hidden="false">
                      <ul class="sidenav-menu">
                        <li class="sidenav-item">
                          <a class="sidenav-link">
                            <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a>
                        </li>
                        <li class="sidenav-item">
                          <a class="sidenav-link"><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span></a>
                          <ul class="sidenav-collapse show">
                            <li class="sidenav-item">
                              <a class="sidenav-link">Link 2</a>
                            </li>
                            <li class="sidenav-item">
                              <a class="sidenav-link">Link 3</a>
                            </li>
                          </ul>
                        </li>
                        <li class="sidenav-item">
                          <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category
                              2</span></a>
                          <ul class="sidenav-collapse">
                            <li class="sidenav-item">
                              <a class="sidenav-link">Link 4</a>
                            </li>
                            <li class="sidenav-item">
                              <a class="sidenav-link">Link 5</a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </nav>
                    <!-- Sidenav -->

                    <!-- Toggler -->
                    <button data-mdb-button-init data-mdb-toggle="sidenav" data-mdb-target="#sidenav-1"
                      data-mdb-ripple-init class="btn btn-primary" aria-controls="#sidenav-1" aria-haspopup="true">
                      <i class="fas fa-bars"></i>
                    </button>
                    <!-- Toggler -->




                    
        
    

End

Simple example of a sidebar hamburger menu with the side navigation element at the end of the viewport (on the left side by default).

Place the navigation on the other side by setting the right attribute to true.

        
            

                    <nav data-mdb-sidenav-init class="sidenav" data-mdb-right="true">
                      ...
                    </nav>




                    
        
    

Double navigation

Hamburger menu button is a great way to implement a responsive double navigation in your projects.

The side navigation will be hidden on smaller screens and reveal itself after a click on the hamburger button.

        
            

                    <!--Main Navigation-->
                    <header>
                      <!-- Sidenav -->
                      <nav id="sidenav-1" data-mdb-sidenav-init class="sidenav" data-mdb-hidden="false"
                        data-mdb-accordion="true">
                        <a class="ripple d-flex justify-content-center py-4" href="#!" data-mdb-ripple-color="primary">
                          <img id="MDB-logo"
                            src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp"
                            alt="MDB Logo" draggable="false" />
                        </a>

                        <ul class="sidenav-menu">
                          <li class="sidenav-item">
                            <a class="sidenav-link" href="">
                              <i class="fas fa-chart-area fa-fw me-3"></i><span>Webiste traffic</span></a>
                          </li>
                          <li class="sidenav-item">
                            <a class="sidenav-link"><i class="fas fa-cogs fa-fw me-3"></i><span>Settings</span></a>
                            <ul class="sidenav-collapse">
                              <li class="sidenav-item">
                                <a class="sidenav-link">Profile</a>
                              </li>
                              <li class="sidenav-item">
                                <a class="sidenav-link">Account</a>
                              </li>
                            </ul>
                          </li>
                          <li class="sidenav-item">
                            <a class="sidenav-link"><i class="fas fa-lock fa-fw me-3"></i><span>Password</span></a>
                            <ul class="sidenav-collapse">
                              <li class="sidenav-item">
                                <a class="sidenav-link">Request password</a>
                              </li>
                              <li class="sidenav-item">
                                <a class="sidenav-link">Reset password</a>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </nav>
                      <!-- Sidenav -->

                      <!-- Navbar -->
                      <nav id="main-navbar" class="navbar navbar-expand-lg bg-white fixed-top">
                        <!-- Container wrapper -->
                        <div class="container-fluid">
                          <!-- Toggler -->
                          <button data-mdb-button-init data-mdb-toggle="sidenav" data-mdb-target="#sidenav-1"
                            data-mdb-ripple-init class="btn shadow-0 p-0 me-3 d-block d-xxl-none"
                            aria-controls="#sidenav-1" aria-haspopup="true">
                            <i class="fas fa-bars fa-lg"></i>
                          </button>

                          <!-- Search form -->
                          <form class="d-none d-md-flex input-group w-auto my-auto">
                            <input autocomplete="off" type="search" class="form-control rounded"
                              placeholder='Search (ctrl + "/" to focus)' style="min-width: 225px" />
                            <span class="input-group-text border-0"><i class="fas fa-search"></i></span>
                          </form>

                          <!-- Right links -->
                          <ul class="navbar-nav ms-auto d-flex flex-row">
                            <!-- Notification dropdown -->
                            <li class="nav-item dropdown">
                              <a data-mdb-dropdown-init class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"
                                href="#" id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown"
                                aria-expanded="false">
                                <i class="fas fa-bell"></i>
                                <span class="badge rounded-pill badge-notification bg-danger">1</span>
                              </a>
                              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
                                <li><a class="dropdown-item" href="#">Some news</a></li>
                                <li><a class="dropdown-item" href="#">Another news</a></li>
                                <li>
                                  <a class="dropdown-item" href="#">Something else here</a>
                                </li>
                              </ul>
                            </li>

                            <!-- Icon -->
                            <li class="nav-item">
                              <a class="nav-link me-3 me-lg-0" href="#">
                                <i class="fas fa-fill-drip"></i>
                              </a>
                            </li>
                            <!-- Icon -->
                            <li class="nav-item me-3 me-lg-0">
                              <a class="nav-link" href="#">
                                <i class="fab fa-github"></i>
                              </a>
                            </li>

                            <!-- Icon dropdown -->
                            <li class="nav-item dropdown">
                              <a data-mdb-dropdown-init class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"
                                href="#" id="navbarDropdown" role="button" data-mdb-toggle="dropdown"
                                aria-expanded="false">
                                <i class="flag-united-kingdom flag m-0"></i>
                              </a>
                              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                <li>
                                  <a class="dropdown-item" href="#"><i class="flag-united-kingdom flag"></i>English
                                    <i class="fa fa-check text-success ms-2"></i></a>
                                </li>
                                <li>
                                  <hr class="dropdown-divider" />
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#"><i class="flag-poland flag"></i>Polski</a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#"><i class="flag-china flag"></i>中文</a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#"><i class="flag-japan flag"></i>日本語</a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#"><i class="flag-germany flag"></i>Deutsch</a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#"><i class="flag-france flag"></i>Français</a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#"><i class="flag-spain flag"></i>Español</a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#"><i class="flag-russia flag"></i>Русский</a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#"><i class="flag-portugal flag"></i>Português</a>
                                </li>
                              </ul>
                            </li>

                            <!-- Avatar -->
                            <li class="nav-item dropdown">
                              <a data-mdb-dropdown-init
                                class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center" href="#"
                                id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown"
                                aria-expanded="false">
                                <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (31).webp"
                                  class="rounded-circle" height="22" alt="Avatar" loading="lazy" />
                              </a>
                              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
                                <li><a class="dropdown-item" href="#">My profile</a></li>
                                <li><a class="dropdown-item" href="#">Settings</a></li>
                                <li><a class="dropdown-item" href="#">Logout</a></li>
                              </ul>
                            </li>
                          </ul>
                        </div>
                        <!-- Container wrapper -->
                      </nav>
                      <!-- Navbar -->
                    </header>
                    <!--Main Navigation-->

                    <!--Main layout-->
                    <main style="margin-top: 58px">
                      <div class="container">

                      </div>
                    </main>
                    <!--Main layout-->

                    <!--Footer-->
                    <footer></footer>
                    <!--Footer-->

                    
        
    
        
            
                        @media (min-width: 1400px) {
                        main,
                        header,
                        #main-navbar {
                        padding-left: 240px;
                        }
                        }
                        
        
    
        
            
                            const sidenav = document.getElementById("sidenav-1");
                            const sidenavInstance = mdb.Sidenav.getInstance(sidenav);

                            let innerWidth = null;

                            const setMode = (e) => {
                            // Check necessary for Android devices
                            if (window.innerWidth === innerWidth) {
                            return;
                            }

                            innerWidth = window.innerWidth;

                            if (window.innerWidth < 1400) { sidenavInstance.changeMode("over"); sidenavInstance.hide();
                              } else { sidenavInstance.changeMode("side"); sidenavInstance.show(); } }; setMode(); //
                              Event listeners window.addEventListener("resize", setMode); 
        
    

Hamburger Icons

Examples of icon usage in Bootstrap Hamburger menu.

You will find even more icons in the Icons Documentation.

Custom icons

You can make any icon a hamburger menu toggler.

        
            

                    <!--Default icon-->
                    <section class="mb-3">
                      <nav class="navbar navbar-light bg-body-tertiary">
                        <div class="container-fluid">
                          <button data-mdb-button-init class="navbar-toggler" type="button" data-mdb-collapse-init
                            data-mdb-target="#navbarToggleExternalContent4" aria-controls="navbarToggleExternalContent4"
                            aria-expanded="false" aria-label="Toggle navigation">
                            <i class="fas fa-bars"></i>
                          </button>
                        </div>
                      </nav>
                      <div class="collapse" id="navbarToggleExternalContent4">
                        <div class="bg-body-tertiary shadow-3 p-4">
                          <button data-mdb-button-init data-mdb-ripple-init
                            class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                          <button data-mdb-button-init data-mdb-ripple-init
                            class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                          <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-block m-0">Link
                            3</button>
                        </div>
                      </div>
                    </section>

                    <!--Hamburger icon-->
                    <section class="mb-3">
                      <nav class="navbar navbar-light bg-body-tertiary">
                        <div class="container-fluid">
                          <button data-mdb-button-init class="navbar-toggler" type="button" data-mdb-collapse-init
                            data-mdb-target="#navbarToggleExternalContent5" aria-controls="navbarToggleExternalContent5"
                            aria-expanded="false" aria-label="Toggle navigation">
                            <i class="fas fa-hamburger"></i>
                          </button>
                        </div>
                      </nav>
                      <div class="collapse" id="navbarToggleExternalContent5">
                        <div class="bg-body-tertiary shadow-3 p-4">
                          <button data-mdb-button-init data-mdb-ripple-init
                            class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                          <button data-mdb-button-init data-mdb-ripple-init
                            class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                          <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-block m-0">Link
                            3</button>
                        </div>
                      </div>
                    </section>

                    <!--Chevron icon-->
                    <section class="mb-3">
                      <nav class="navbar navbar-light bg-body-tertiary">
                        <div class="container-fluid">
                          <button data-mdb-button-init class="navbar-toggler" type="button" data-mdb-collapse-init
                            data-mdb-target="#navbarToggleExternalContent6" aria-controls="navbarToggleExternalContent6"
                            aria-expanded="false" aria-label="Toggle navigation">
                            <i class="fas fa-chevron-circle-down"></i>
                          </button>
                        </div>
                      </nav>
                      <div class="collapse" id="navbarToggleExternalContent6">
                        <div class="bg-body-tertiary shadow-3 p-4">
                          <button data-mdb-button-init data-mdb-ripple-init
                            class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                          <button data-mdb-button-init data-mdb-ripple-init
                            class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                          <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-block m-0">Link
                            3</button>
                        </div>
                      </div>
                    </section>

                    <!--Dots icon-->
                    <section class="mb-3">
                      <nav class="navbar navbar-light bg-body-tertiary">
                        <div class="container-fluid">
                          <button data-mdb-button-init class="navbar-toggler" type="button" data-mdb-collapse-init
                            data-mdb-target="#navbarToggleExternalContent7" aria-controls="navbarToggleExternalContent7"
                            aria-expanded="false" aria-label="Toggle navigation">
                            <i class="fas fa-ellipsis-h"></i>
                          </button>
                        </div>
                      </nav>
                      <div class="collapse" id="navbarToggleExternalContent7">
                        <div class="bg-body-tertiary shadow-3 p-4">
                          <button data-mdb-button-init data-mdb-ripple-init
                            class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                          <button data-mdb-button-init data-mdb-ripple-init
                            class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                          <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-block m-0">Link
                            3</button>
                        </div>
                      </div>
                    </section>

                    <!--Compass icon-->
                    <section class="mb-3">
                      <nav class="navbar navbar-light bg-body-tertiary">
                        <div class="container-fluid">
                          <button data-mdb-button-init class="navbar-toggler" type="button" data-mdb-collapse-init
                            data-mdb-target="#navbarToggleExternalContent8" aria-controls="navbarToggleExternalContent8"
                            aria-expanded="false" aria-label="Toggle navigation">
                            <i class="fas fa-compass"></i>
                          </button>
                        </div>
                      </nav>
                      <div class="collapse" id="navbarToggleExternalContent8">
                        <div class="bg-body-tertiary shadow-3 p-4">
                          <button data-mdb-button-init data-mdb-ripple-init
                            class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                          <button data-mdb-button-init data-mdb-ripple-init
                            class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                          <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-block m-0">Link
                            3</button>
                        </div>
                      </div>
                    </section>




                    
        
    

Animated icons

Animated hamburger menu icons add dynamism to your design.

        
            

                    <!--First button-->
                    <section class="mb-3">
                      <nav class="navbar bg-body-tertiary">
                        <div class="container-fluid">
                          <button data-mdb-button-init class="navbar-toggler first-button" type="button" data-mdb-collapse-init
                            data-mdb-target="#navbarToggleExternalContent9" aria-controls="navbarToggleExternalContent9"
                            aria-expanded="false" aria-label="Toggle navigation">
                            <div class="animated-icon1"><span></span><span></span><span></span></div>
                          </button>
                        </div>
                      </nav>
                      <div class="collapse" id="navbarToggleExternalContent9">
                        <div class="bg-body-tertiary shadow-3 p-4">
                          <button data-mdb-button-init data-mdb-ripple-init
                            class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                          <button data-mdb-button-init data-mdb-ripple-init
                            class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                          <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-block m-0">Link
                            3</button>
                        </div>
                      </div>
                    </section>

                    <!--Second button-->
                    <section class="mb-3">
                      <nav class="navbar navbar-dark bg-dark">
                        <div class="container-fluid">
                          <button data-mdb-button-init class="navbar-toggler second-button" type="button" data-mdb-collapse-init
                            data-mdb-target="#navbarToggleExternalContent10"
                            aria-controls="navbarToggleExternalContent10" aria-expanded="false"
                            aria-label="Toggle navigation">
                            <div class="animated-icon2"><span></span><span></span><span></span><span></span></div>
                          </button>
                        </div>
                      </nav>
                      <div class="collapse" id="navbarToggleExternalContent10">
                        <div class="bg-body-tertiary shadow-3 p-4">
                          <button data-mdb-button-init data-mdb-ripple-init
                            class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                          <button data-mdb-button-init data-mdb-ripple-init
                            class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                          <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-block m-0">Link
                            3</button>
                        </div>
                      </div>
                    </section>

                    <!--Third button-->
                    <section class="mb-3">
                      <nav class="navbar navbar-info bg-info">
                        <div class="container-fluid">
                          <button data-mdb-button-init class="navbar-toggler third-button" type="button" data-mdb-collapse-init
                            data-mdb-target="#navbarToggleExternalContent11"
                            aria-controls="navbarToggleExternalContent11" aria-expanded="false"
                            aria-label="Toggle navigation">
                            <div class="animated-icon3"><span></span><span></span><span></span></div>
                          </button>
                        </div>
                      </nav>
                      <div class="collapse" id="navbarToggleExternalContent11">
                        <div class="bg-body-tertiary shadow-3 p-4">
                          <button data-mdb-button-init data-mdb-ripple-init
                            class="btn btn-link btn-block border-bottom m-0">Link 1</button>
                          <button data-mdb-button-init data-mdb-ripple-init
                            class="btn btn-link btn-block border-bottom m-0">Link 2</button>
                          <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-block m-0">Link
                            3</button>
                        </div>
                      </div>
                    </section>

                    
        
    
        
            
                        /* Icon 1 */

                        .animated-icon1,
                        .animated-icon2,
                        .animated-icon3 {
                        width: 30px;
                        height: 20px;
                        position: relative;
                        margin: 0px;
                        -webkit-transform: rotate(0deg);
                        -moz-transform: rotate(0deg);
                        -o-transform: rotate(0deg);
                        transform: rotate(0deg);
                        -webkit-transition: .5s ease-in-out;
                        -moz-transition: .5s ease-in-out;
                        -o-transition: .5s ease-in-out;
                        transition: .5s ease-in-out;
                        cursor: pointer;
                        }

                        .animated-icon1 span,
                        .animated-icon2 span,
                        .animated-icon3 span {
                        display: block;
                        position: absolute;
                        height: 3px;
                        width: 100%;
                        border-radius: 9px;
                        opacity: 1;
                        left: 0;
                        -webkit-transform: rotate(0deg);
                        -moz-transform: rotate(0deg);
                        -o-transform: rotate(0deg);
                        transform: rotate(0deg);
                        -webkit-transition: .25s ease-in-out;
                        -moz-transition: .25s ease-in-out;
                        -o-transition: .25s ease-in-out;
                        transition: .25s ease-in-out;
                        }

                        .animated-icon1 span {
                        background: #2d7ef7;
                        }

                        .animated-icon2 span {
                        background: #e3f2fd;
                        }

                        .animated-icon3 span {
                        background: #f3e5f5;
                        }

                        .animated-icon1 span:nth-child(1) {
                        top: 0px;
                        }

                        .animated-icon1 span:nth-child(2) {
                        top: 10px;
                        }

                        .animated-icon1 span:nth-child(3) {
                        top: 20px;
                        }

                        .animated-icon1.open span:nth-child(1) {
                        top: 11px;
                        -webkit-transform: rotate(135deg);
                        -moz-transform: rotate(135deg);
                        -o-transform: rotate(135deg);
                        transform: rotate(135deg);
                        }

                        .animated-icon1.open span:nth-child(2) {
                        opacity: 0;
                        left: -60px;
                        }

                        .animated-icon1.open span:nth-child(3) {
                        top: 11px;
                        -webkit-transform: rotate(-135deg);
                        -moz-transform: rotate(-135deg);
                        -o-transform: rotate(-135deg);
                        transform: rotate(-135deg);
                        }

                        /* Icon 3*/

                        .animated-icon2 span:nth-child(1) {
                        top: 0px;
                        }

                        .animated-icon2 span:nth-child(2),
                        .animated-icon2 span:nth-child(3) {
                        top: 10px;
                        }

                        .animated-icon2 span:nth-child(4) {
                        top: 20px;
                        }

                        .animated-icon2.open span:nth-child(1) {
                        top: 11px;
                        width: 0%;
                        left: 50%;
                        }

                        .animated-icon2.open span:nth-child(2) {
                        -webkit-transform: rotate(45deg);
                        -moz-transform: rotate(45deg);
                        -o-transform: rotate(45deg);
                        transform: rotate(45deg);
                        }

                        .animated-icon2.open span:nth-child(3) {
                        -webkit-transform: rotate(-45deg);
                        -moz-transform: rotate(-45deg);
                        -o-transform: rotate(-45deg);
                        transform: rotate(-45deg);
                        }

                        .animated-icon2.open span:nth-child(4) {
                        top: 11px;
                        width: 0%;
                        left: 50%;
                        }

                        /* Icon 4 */

                        .animated-icon3 span:nth-child(1) {
                        top: 0px;
                        -webkit-transform-origin: left center;
                        -moz-transform-origin: left center;
                        -o-transform-origin: left center;
                        transform-origin: left center;
                        }

                        .animated-icon3 span:nth-child(2) {
                        top: 10px;
                        -webkit-transform-origin: left center;
                        -moz-transform-origin: left center;
                        -o-transform-origin: left center;
                        transform-origin: left center;
                        }

                        .animated-icon3 span:nth-child(3) {
                        top: 20px;
                        -webkit-transform-origin: left center;
                        -moz-transform-origin: left center;
                        -o-transform-origin: left center;
                        transform-origin: left center;
                        }

                        .animated-icon3.open span:nth-child(1) {
                        -webkit-transform: rotate(45deg);
                        -moz-transform: rotate(45deg);
                        -o-transform: rotate(45deg);
                        transform: rotate(45deg);
                        top: 0px;
                        left: 8px;
                        }

                        .animated-icon3.open span:nth-child(2) {
                        width: 0%;
                        opacity: 0;
                        }

                        .animated-icon3.open span:nth-child(3) {
                        -webkit-transform: rotate(-45deg);
                        -moz-transform: rotate(-45deg);
                        -o-transform: rotate(-45deg);
                        transform: rotate(-45deg);
                        top: 21px;
                        left: 8px;
                        }
                        
        
    
        
            
                            document.querySelector('.first-button').addEventListener('click', function () {

                            document.querySelector('.animated-icon1').classList.toggle('open');
                            });
                            document.querySelector('.second-button').addEventListener('click', function () {

                            document.querySelector('.animated-icon2').classList.toggle('open');
                            });
                            document.querySelector('.third-button').addEventListener('click', function () {

                            document.querySelector('.animated-icon3').classList.toggle('open');
                            });