【解決】EC-CUBE(3系)スマホサイトでハンバーガーメニューが表示されない

「ボタン押しても何も出ないんですけど・・・」

お客さんのサイトで問い合わせ。
作った時はきちんと三本チルダタップでサイドメニューが表示されたはずなのですが・・・

何も出ていません。いつから出ていなかったんだろう・・・

スタイルシートを確認すると

EC-CUBE3系ではレスポンシブで横幅768px未満になるとスマホ表示に切り替わるようで、その時にメニューの中に入っているコンテンツをjsでコピーしてドロワーの中に格納しているようです。

IDで言うと、三点チルダをタップすると「drawer」の中に「drawer-open」が出来ます。
普段はdrawerは
height:0; visibility:hidden
で表示されず、drawer-openの方でheightとvisibilityを設定して表示されていたようなのですが、これがなぜか親であるdrawerの内容が継承されてしまっていた模様。

応急処置

EC-CUBE格納ディレクトリの
/html/template/default/css/style.css
3221行目、スマホ表示制御部分(media only screen and (max-width: 767px))のdrawer設定の

.drawer {
    height: 0;
    visibility: hidden;

を強引にコメントアウト。

.drawer {
    //height: 0;
    //visibility: hidden;

なんとか表示されるようになりました。

ついでにずっと気になっていたPC版のタイトル画像部分も修正

こちらもいつの間にか、ヘッダのコピー行(h1)の横幅に引っ張られてしまったロゴ表示エリアも強引に横に引き伸ばし。

/html/template/default/css/style.css
3562行目の#header .copy の設定部分に

        #header .copy {
                width: 500px;

無理やり横に大きくしたのでした。

あと気になっているのはハンバーガーメニューがチルダで閉じない(未解決)

×マーク(三本チルダだったところ)を押しても何も起こりません。
まあグレーアウトしている画面をタップすればサイドメニューが消えて、元に戻るのですが。これはまた別のタイミングで!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA