トグル型ナビゲーションメニューをクリックした際の挙動がおかしい

Question

トグルボタンをクリックした際、メニューが表示するところまでは出来たのですが
メニュータイトルが縦に出てきてしまいます。

また表示位置もロゴの下に置きたいのですがどうすればいいかわかりません。
CSSで修正ができると思うのですが、どう試行錯誤してもうまくいきませんでした。

大変申し訳ございませんが、ご教示を頂けますでしょうか。
宜しくお願い致します。

http://minjyo.net/

@media (max-width: 599px)
money:522
button#navbtn {
position: absolute;
top: 20px;
right: -25px;
color: #000;
font-size: 14px;
border: solid 1px #aaa;
border-radius: 5px;
padding: 6px 12px;
cursor: pointer;
}

Answer 1

トグルの開閉は「navbtn.js」内のjqueryのslideToggleでやっている
ようなのでcssではどうしようもないです。displayの切り替えをtoggleClassで
行い、メディアクエリで一定の幅以上であればdisplay:none以外にすれば
解決すると思います。

Answer 2

拝見しましたがメニュータイトルが縦に出るのは幅がないからです。
試しにaに幅を持たせてみてください。

@media (max-width: 599px){
    li.menu-item a {
        width: 300px;
    }
}

またロゴの下にという件に関してはposition:absolute;
を使われているのでどうとでもできるかと

@media (max-width: 599px)
money:522
button#navbtn {
position: absolute;
top: 50px;
left:0;
/*right: -25px;*/
color: #000;
font-size: 14px;
border: solid 1px #aaa;
border-radius: 5px;
padding: 6px 12px;
cursor: pointer;
}

Comments

[pyoo001213]

ありがとうございます。　トグルボタンの場所はそのままで
メニューの位置を変更したいと思っております。

▼参考サイト
http://workin.biz/

[pyoo001213]

上記解決しました。
ここで一つ問題が出来てしまいました。

PCでトグルを開き、閉じた状態で画面を広げるとメニューが消えてしまう現象がおきました。

ソースを見ると

element.style {
display: none;
}

が働いてしまいました。
修正するにはどうすればよろしいでしょうか？
改めて、ご教示頂ければ幸いです。