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?

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website OR off-site example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). — Paulie_D, Nov 15 '19 at 14:09
@Paulie_D Same as yesterday bud, this link is a snippet. there is no specific link requiring it be posted in a stack snippet. — Libra, Nov 15 '19 at 14:10
@Laif Nope...code has to be **IN THE QUESTION** to be of use. It doesn't have to be a Snippet but it still has to be in the question. — Paulie_D, Nov 15 '19 at 14:11
See the link in my earlier comment. *"Then post the code to reproduce the problem in your question, probably as a live demonstration using Stack Snippets. As some people are more used to them, consider **additionally** providing it on JS Bin and/or jsFiddle. Since these are third party services and may be unavailable at any time, make sure your question can be understood without visiting these websites."* as stated... — Paulie_D, Nov 15 '19 at 14:12
In that link it literally says that JsFiddle is acceptable as long as code is available on site as well, however your wording makes it seem like using such sites is not allowed — Libra, Nov 15 '19 at 14:13

score 4 · Accepted Answer · edited Nov 15 '19 at 14:15

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.

CSS3 transform property not working for responsive navbar

1 Answers1