CSS3 transform property not working for responsive navbar

Question

I found an existing article about this, but the solution given doesn't work for my project. I've been trying to create a responsive navbar and have created a hamburger menu for small screens, its supposed to tilt 45deg when the class .change is applied however it doesn't work.

HTML

<div class="menu-toggle">
            <div class="bar change bar1"></div>
            <div class="bar bar2"></div>
            <div class="bar bar3"></div>
</div>

CSS

.navbar .menu-toggle {
    display: block;
    height: 100px;
    width: 100px;
    z-index: 1;
    align-items: center;
    margin-top: 60px;
}

.navbar .menu-toggle .bar {
    height: 5px;
    width: 30px;
    background: #333;
    color: #333;
    margin-top: 5px;
}

.navbar .menu-toggle .bar .change .bar1 {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

What am I doing wrong?

Answer 1

Instead of:

.navbar .menu-toggle .bar .change .bar1 {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

You need to write:

.navbar .menu-toggle .bar.change.bar1 {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

because the classes .bar .change .bar1 are on the same element.

Putting whitespace between the classes mean that the class is not on the same element.