Question

139

Bootstrap mobile menu icon change to x close

rated 0 times [ 142] [ 3] / answers: 1 / hits: 72428 / 10 Years ago, sat, january 31, 2015, 12:00:00

I would like, when in mobile view, for the menu icon (defined with class icon-bar in the bootstrap basic navbar example) to change to an X shape (Something similar to what happens here: https://www.mint.com but less fancy (I just want to replace the 3 stripes with an X).

At the moment I am using a custom id: #ChangeToggle

<button id="ChangeToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

            <span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

</button>

Along with the following javascript function (I know it's basic but I'm new to this):

<script>    

$('#ChangeToggle').click(function () {

    if($('#ChangeToggle span').hasClass('ToggleButton')) {

        $('#ChangeToggle').html('<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>'); 

    }

    else {      

        $('#ChangeToggle').html('<span class="ToggleButton glyphicon glyphicon-remove"></span>'); 

    }

});

</script>

Everything works, the only issue is that when I click exactly on the X icon the menu does not close. It only closes when I click outside of it (anywhere else in the button). The only thing it does while clicking on the X icon is going back to the original 3 stripes.

Anyone knows what I am doing wrong?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

trayvon

Add To Favorites

Follow

Total Points: 35

Total Questions: 117

Total Answers: 88

Location: Guernsey

Member since Tue, Jul 6, 2021

3 Years ago

answered 10 Years ago isham · Accepted 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>