Bootstrap Mobile Menu Icon Change To X Close

Answer :

Your JavaScript replaces the inner html of the #ChangeToggle element to show either the X or the hamburger icon. Precisely clicking on the X or the hamburger menu instead of the #ChangeToggle will remove the element being clicked on which I think prevents it from bubbling up. As Bootstrap's collapse plugin uses an event handler on the document to determine if an element has been clicked, the collapse plugin will never get notified.

I've created a small example where a click handler on the pink .outer area replaces the green .inner area. Note that clicking on the pink area (your #ChangeToggle) will lead to two events, where clicking on the green area (your X icon) will lead to a single event.

$(function() {   $('.outer')     .click(function() {       $('.outer').html('<div class="inner"></div>');       fired('.js-outer');     });    $(document).on('click', '.outer', function() {     fired('.js-document');   }); });  function fired(el) {   $(el).addClass('event--fire');   window.setTimeout(function() {     $(el).removeClass('event--fire')   }, 100); }

body {   font-family: Helvetica Neue, Helvetica, Arial; } .outer, .inner {   display: inline-block;   padding: 20px; } .outer {   border: 1px solid #c66;   background-color: #f99; } .inner {   border: 1px solid #6c6;   background-color: #9f9; } .event {   margin: 10px 0; } .event::before {   display: inline-block;   content: '';   border: 1px solid #ccc;   padding: 10px;   vertical-align: middle;   margin-right: 10px; } .event--fire:before {   background-color: #ff9; }

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>   <div class="outer">   <div class="inner">   </div> </div>  <div class="event js-outer">Event fires on .outer</div> <div class="event js-document">Event fires on document</div>

The easiest way to solve this issue for your navigation bar is to hide/show the X or hamburger icon instead of replacing. In the example below both the X and the hamburger icon are in the html, and toggling the class .hidden is used to show the correct icon.

$(function() {   $('#ChangeToggle').click(function() {     $('#navbar-hamburger').toggleClass('hidden');     $('#navbar-close').toggleClass('hidden');     }); });

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>  <nav class="navbar navbar-default">   <div class="container-fluid">     <!-- Brand and toggle get grouped for better mobile display -->     <div class="navbar-header">       <button id="ChangeToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">         <div id="navbar-hamburger">           <span class="sr-only">Toggle navigation</span>           <span class="icon-bar"></span>           <span class="icon-bar"></span>           <span class="icon-bar"></span>         </div>         <div id="navbar-close" class="hidden">           <span class="glyphicon glyphicon-remove"></span>         </div>       </button>       <a class="navbar-brand" href="#">Brand</a>     </div>      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">       <ul class="nav navbar-nav">         <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>         </li>       </ul>     </div>   </div> </nav>

Instead of adding a jQuery click handler next to Bootstrap's collapse plugin, you could also use the events fired by the collapse plugin to hide or show the correct icon. Use the shown.bs.collapse event to show the X icon, and the hidden.bs.collapse event to show the hamburger icon.

$(function() {      $('#bs-example-navbar-collapse-1')     .on('shown.bs.collapse', function() {       $('#navbar-hamburger').addClass('hidden');       $('#navbar-close').removeClass('hidden');         })     .on('hidden.bs.collapse', function() {       $('#navbar-hamburger').removeClass('hidden');       $('#navbar-close').addClass('hidden');             });    });

#navbar-close {   color: #888;   width: 22px;   height: 14px; }

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>  <nav class="navbar navbar-default">   <div class="container-fluid">     <!-- Brand and toggle get grouped for better mobile display -->     <div class="navbar-header">       <button id="ChangeToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">         <div id="navbar-hamburger">           <span class="sr-only">Toggle navigation</span>           <span class="icon-bar"></span>           <span class="icon-bar"></span>           <span class="icon-bar"></span>         </div>         <div id="navbar-close" class="hidden">           <span class="glyphicon glyphicon-remove"></span>         </div>       </button>       <a class="navbar-brand" href="#">Brand</a>     </div>      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">       <ul class="nav navbar-nav">         <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>         </li>       </ul>     </div>   </div> </nav>

You don't need Javascript, CSS will do the Job

.navbar-toggle {     .icon-bar {         transition: 300ms ease-in-out;         background-color: #fff;         position: relative;         width: 24px;         height: 3px;     }     .icon-bar:last-child {         -webkit-transform: rotate(-45deg);         -ms-transform: rotate(-45deg);         -o-transform: rotate(-45deg);         transform: rotate(-45deg);         top: -7px;     }     .icon-bar:nth-child(2) {         -webkit-transform: rotate(45deg);         -ms-transform: rotate(45deg);         -o-transform: rotate(45deg);         transform: rotate(45deg);         top: 0px;     }     .icon-bar:nth-child(3) {         opacity: 0;     }     &.collapsed {         .icon-bar {             -webkit-transform: rotate(0deg);             -ms-transform: rotate(0deg);             -o-transform: rotate(0deg);             transform: rotate(0deg);                     top: 0;             opacity: 1;         }     } } 

As of Bootstrap 4.1, the "hamburger" toggler is no longer <span> tags, and is now a single SVG icon background image.

Therefore it's simplest to swap it out with a little CSS. Then you can use another font icon (like FontAwesome) or a simple '✖' character...

   <button class="navbar-toggler collapsed border-0" type="button" data-toggle="collapse" data-target="#collapsingNavbar">         <span class="navbar-toggler-icon"></span>         <div class="close-icon py-1">✖</div>    </button>     /* hide close when burger shown */    .navbar-toggler.collapsed .close-icon {       display: none;    }     .navbar-toggler:not(.collapsed) .navbar-toggler-icon {       display: inline;    } 

Demo

---

Another option is this animated hamburger:
https://codeply.com/p/L9HT5GaUtt