ハンバーガーメニューを押すと消えてしまう

[快遠藤]

いつもお世話になっております。

COLORSのカスタムスキン2でサイトを構築しています。スマートフォン閲覧時のハンバーガーメニューの挙動について改善したいです。

現在：一度ハンバーガーメニューを押すと消えてしまう（ハンバーガーメニューがありそうな場所をタップすると動作はする）
実現したいこと：ハンバーガーメニューを押しても消えないようにしたい

この事象が発生するのはiPhoneSE2です。PCのChromeで閲覧してもスマートフォンではないためフッターバーが表示されません。

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

添付ファイル:

添付ファイルを開くにはログインしてください。

[DigiPress サポート]

テーマのバージョンをご提示ください。

また、詳細が把握できませんので対象サイトを閲覧できる状態にしてください。

[快遠藤]

返信ありがとうございます。
テーマのバージョンは
COLORS by DigiPressバージョン: 2.3.4.3です。
サイトを開放いたしました。

[DigiPress サポート]

対象サイトですが、ソースを解析する限り、膨大な数の問題や懸念箇所があります。

ソース上から判断するに、独自のCSSやJavaScriptを挿入するために「Simple Custom CSS and JS」というプラグインを利用されているのかわかりませんが、ソース上のあらゆる箇所で突如不規則でインラインで未圧縮状態の style タグ(CSS)が、本来出力すべきでないコメントアウト(例 //PCのデフォルトスタイルは割愛します など多数)と共に出力されています。

またソース上からは、インラインで膨大なCSSを一般的なセレクタ名(名詞、呼称)のみ(clear, shop, map, address, size, tab, i などその他多数)で突如インラインであらゆる箇所に挿入されており、さらに同じプロパティ(定義内容)のセレクタ(例えば .clear)を何度も重複していたりと、ソース上ではCSSの定義はかなり滅茶苦茶な状態です。

エミュレータにてデモサイトを iPhone SE(第2世代)にて確認しましたが、特に該当するような表示上(CSS)の不都合は確認できません。

iPhone SE(第2世代)にてデモサイト(https://skin.dptheme.net/colors2/)を参照した結果をご報告ください。

これが対象サイト固有の事象であれば、まずは先述の何らかの方法によってインラインで挿入されている膨大な懸念すべきCSSの排除、さらにすべてのプラグインを停止した場合に問題が解決されるようであれば、テーマではなく独自に何らかの方法で挿入された不正なCSSを見直してください。

[快遠藤]

返信とソースの確認ありがとうございます。
ご推察の通りSimple Custom CSS and JSを使用していたため停止しました。

CSSの定義がめちゃくちゃな件についてはおそらくウィジェット（カスタムHTML)でそれぞれに<style></style>を用いてCSSを記述していたためです。

ご提示いただいたデモサイトをiPhoneSE2で確認したところハンバーガーメニューの崩れは確認できませんでした。

原因としてフッターに挿入したフッターエリア（モバイル用）ウィジェットにFont Awesomeを使用し、アイコン同士の空白を開ける際にiを指定してしまったためハンバーガーメニュー内のiに影響を与えてしまったのだと思われます。
無事に正常に表示されました、ありがとうございました。

質問ばかりで恐縮ですが、デモサイトではカスタムフッターバー（水色部分）に検索・ホーム・先頭へ・メニューの4つアイコンが並んでいてバランスが取れていますが、アイコンが3つの場合表示のバランスが悪く見えてしまいます。バランスよく・押しやすくするためにファイルのどこかを編集したいのですが、可能でしょうか。(添付画像footerimage.jpg)

添付ファイル:

添付ファイルを開くにはログインしてください。

[DigiPress サポート]

フォーラムはナレッジベースですので、別のトピックは改めて新規トピックとして投稿してください。

フッターバーの構造は、両端に表示されるハンバーガーメニューと検索アイコンは、中央の自動ナビゲーション(またはカスタムフッターメニュー項目)と並びの要素ではなく、見た目上はフッターバーにありますが、ソース上ではフッターバーよりも前にあります。

これは、ハンバーガーメニューと検索アイコンはトリガーボタンの役割をしており、タップされることでポップアップ(全画面)のメニューまたは検索フォームを表示する機能をCSSのみで実装するために、実際にはフッターバーとは別(フッターバーと同じ階層)の位置にあります。

従って、中央のナビゲーション(またはカスタムメニュー)は項目数に応じて均等な幅(display:flex)で表示されますが、両端のハンバーガーメニューと検索アイコンは絶対位置で固定幅表示となっています。
※イメージ参照

これを現在の検索アイコンなしの3項目決め打ちとしてリサイズするには、オリジナルCSSに以下を追記してください。

.ftbar_btn .ftbtn_inner{
width:33.33%;
}
.footer_bar.has_menu .ftbar_ul{
width:calc(100% - 33.33%);
}

このCSSは検索アイコンを表示したり中央のメニューを増減した場合はレイアウトが崩れることに留意してください。

添付ファイル:

添付ファイルを開くにはログインしてください。

[快遠藤]

大変失礼しました、今後質問内容が変わる際は新規トピックとして投稿させていただきます。

両端のハンバーガーメニューが動かせなかったのには理由があったのですね、もっと勉強します。

CSSの共有ありがとうございます。
オリジナルCSSに追記し正常に表示されることを確認できました。

[投稿者]

投稿