ハンバーガーメニューが動きません。

Question

初心者です。

ググってもどうしても解決策が見つからず、質問させてください。

ハンバーガーメニューが動きません。
consoleでは問題なさそうなので、おそらくsassに問題がありそうです。

どなたかご教授頂けると助かります。

よろしくお願いいたします。

<div class="mobile-header">
        <div class="hbg-animation">
            <span class="line-top"></span>
            <span class="line-middle"></span>
            <span class="line-bottom"></span>
        </div>
        <nav>
            <ul class="menu">
                <div class="menu-box">
                    <li><a href="work.html">Work</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </div>
            </ul>
        </nav>
        <h1 class="header-logo">
            <a href="/" class="header-logo-main">
                <img src="images/logo.svg">
            </a>
        </h1>
    </div>

.hbg-animation {
            display: block;
            position: absolute;
            top: 2rem;
            left: 2rem;
            width: 40px;
            height: 32px;
            z-index: 100;
            cursor: pointer;
            span {
                display: block;
                position: absolute;
                background-color: #000;
                height: 2px;
                width: 100%;
                border-radius: 2px;
            }
            .line-top {
                top: 0px;
            }
            .line-middle {
                top: 15px;
            }
            .line-bottom {
                top: 30px;
            }
            .open {
                .line-top {
                    top: 0px;
                    transform: translateY(15px) rotate(-45deg);
                }
                .line-middle {
                    top: 15px;
                    background: rgba(255, 255, 255, 0);
                }
                .line-bottom {
                    top: 30px;
                    transform: translateY(-15px) rotate(45deg);
                }
            }
        }

$('.hbg-animation').on('click', function(){
	$(this).toggleClass('open');
});

Comments

[m.ts10806]

「初心者」自体は要件ではありませんので質問に含めるのではなく「初心者アイコン」をつけてください

[m.ts10806]

あと「動かない」とか「うまくいかない」だけだと具体的に起こっている現象は伝わりません。エラー確認や動かそうとして起きてい現象を具体的に記載してください

[mion]

これから質問する時はもっと伝わりやすく心がけます。初心者アイコンもこれからやってみます。ご指摘ありがとうございます。これからもよろしくお願いいたします。

[mion]

これから質問する時はもっと伝わりやすく心がけます。初心者アイコンもこれからやってみます。ご指摘ありがとうございます。これからもよろしくお願いいたします。

[m.ts10806]

解決されたようで何よりです

Answer 1

.open {

↓

&.open {

とするとどうなりますか？

Comments

[mion]

できました！今日半日ハマっていたので助かりました！ありがとうございます！！