[ 解決済 ] フッターナビをPC表示のみにしたい

[poohdai515]

■ 利用テーマとバージョン :
Lightning Proバージョン: 8.9.1
Lightning Skin Pale　バージョン 8.1.2

■ 質問内容：
フッターナビゲーションの表示をPCのみ（モバイルは表示なし）にしたいのですが、
どのようなCSSになるのかご教授いただきたく・・・
初歩のご質問すみません（Chromeの検証でモバイルのソースの取得方法がいまいちわからずで・・・）

[対馬 俊彦]

Chrome の検証で、先頭の body タグの部分に着目してください。

PC で表示したときにはクラス device-pc がつきますが、
モバイル端末のときは device-mobile となります。

このクラス名で PC・モバイル の区別ができます。

[対馬 俊彦]

Chromeの検証でモバイルのソースの取得方法がいまいちわからずで・・・

すいません、こちらについての回答も必要でしたね。
以下のサイトに手順が載っています。

https://www.atmarkit.co.jp/ait/articles/1403/20/news050.html

[poohdai515]

対馬さま

ご返信ありがとうございます。
大変勉強になりました。

しかし、 Footer Navigationをモバイルのみ消すCSSがどうしても発見できず、
こちらは表示しない事にして、
フッター上部のウィジェットを利用して、メニューを入れるというアナログな方法で解決してみました。

ありがとうございました。

[対馬 俊彦]

[解決済] となりましたが、参考になると思いますので投稿させていただきます。
勉強ついでにお読みいただければと思います。

考え方を順を追って書きますが、添付画像もあわせてご参照ください。

まず、非表示にするときの CSS は display: none; です。

デベロッパーツールで探すと、フッターナビゲーションの部分が赤矢印で示した通り
クラス名 menu-footer-navigation-container
になっていますので、以下の CSS で非表示にすることができます。

.menu-footer-navigation-container {
display: none;
}

この CSS だと PC でも非表示になってしまいますので、
モバイル端末のときだけ非表示にするためには以下のようにします。

.device-mobile .menu-footer-navigation-container {
display: none;
}

性格悪いなぁ…
最初からこの CSS を回答してくれればいいのに…
と思われたらごめんなさい。

もらったコードをコピペして済ませるのは楽かもしれませんが、
それだけだとあまり進歩がないと思います。

poohdai515 さんは時間をかけて試行錯誤して
解決法に辿りついておられるようなので、
おせっかいでまた投稿させていただきました。

上から目線で気に入らない…
と思われたらごめんなさい。

Attachments:

You must be logged in to view attached files.

[poohdai515]

対馬さま

追加でご教授いただき感謝です！
デベロッパーツールを使いこなせていないんですね・・・
そもそも
menu-footer-navigation-container
このクラスを発見できずにおります・・・

がんばってみます。ありがとうございました！

[対馬 俊彦]

menu-footer-navigation-container
このクラスを発見できずにおります・・・

私が先ほど「リンク文字のマウスホバーの下線」のトピックに投稿した図解を見て、
こちらもがんばってやってみてください。

【追記】以下の操作も役に立つと思います。
HTMLソースで行頭にある右向きの三角マークをクリックすると
中味が展開表示されます。

• この返信は3年前に対馬 俊彦が編集しました。

[投稿者]

投稿