Bootstrap mobile menu icon change to x close

Question

EDIT

@zim answer uses 2020 CSS to easily solve the issue and better applies to Bootstrap 4.

The original question and selected answer are still

Answer 1

No need to use javascript through css also you can do please follow below code.

HTML

CSS (in css use :not which will perform faster animation rather than javascript)

.navbar-toggle .icon-bar {
    position: relative;
    transition: all 200ms ease-in-out;
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(1) {
    top: 6px;
    transform: rotate(45deg);
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(2) {
    background-color: transparent;
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(3) {
    top: -6px;
    transform: rotate(-45deg);
}