ハンバーガーメニュー（ドロワーメニュー）が押せない。

###発生している問題・エラーメッセージ
ハンバーガーメニューが押せません。押しても動作しません。
デベロッパーツールでは、問題なく動作しています。
h1の右横になるようにしています。
重なってはいないと思うのですが・・・

###該当のソースコード

<nav id="nav" class="fixed"> <h1><a href="index.html"><img src="images/banner_05.png" alt="スプリングスホームページ制作"></a></h1> <div id="ham-menu" id="fixedBox" class="nav"> <ul id="menu" class="clearfix"> <li><a href="index.html">TOP</a></li> <li><a href="#about">Springsとは</a></li> <li><a href="#works">制作実績</a></li> <li><a href="#flow">制作の流れ</a></li> <li><a href="../springs/price/">料金</a></li> <li><a href="#office">会社概要</a></li> <li><a href="#contact">お問い合わせ</a></li> </ul> </div> <div id="menu-background"></div> </nav>

/* スマートフォン縦置き以下 */
@media (max-width: 480px)
{
/メニュー部分/
#ham-menu {
background-color: #fff; /メニュー背景色/
box-sizing: border-box;
height: 100%;
padding: 10px 40px; /メニュー内部上下左右余白/
position: fixed;
right: -300px; /メニュー横幅①と合わせる/
top: 0;
transition: transform 0.3s linear 0s; /0.3s は変化するのにかかる時間/
width: 300px; /メニュー横幅①/
z-index: 1000;
}

/メニューアイコン部分は疑似要素で/
#ham-menu::before {
background-color: #fff; /ボタン部分背景色/
border-radius: 0 0 0 10px; /左下角丸/
color: #333; /アイコン（フォント）色/
content: "≡"; /メニューアイコン/
display: block;
font-size: 50px; /アイコン（フォント）サイズ/
height: 50px;
line-height: 50px; /縦位置中央化/
position: absolute;
right: 100%;
text-align: center;
top: 0;
width: 50px;
z-index: 99999999;
}

/透過背景部分/
#menu-background {
background-color: #333; /黒背景部分背景色/
display: block;
height: 100%;
opacity: 0;
position: fixed;
right: 0;
top: 0;
transition: all 0.3s linear 0s; /0.3s は変化するのにかかる時間/
width: 100%;
z-index: -1;
}