Q&A
下記のどれかがあると、回答しやすいと思います。
・使用しているテーマの名前
・「メニュー設定でグローバルメニューを選択」したときの管理画面のキャプチャ
HTML側に「global-nav」というクラスを持った要素は出力されていますか?
現在wordpressでホームページをつくりはじめていて
グローバルメニューを設定したいのですが
メニュー設定でグローバルメニューを選択していても
表示されず困っています><
同じようにグローバルメニューが表示されないという
質問者様や回答を参考にしたのですが
うまくいかず表示されていないままです
CSSはこのようになっています
/* グローバルメニュー */
.global-nav {
float: right;
font-size: 14px;
}
.global-nav .menu-item-has-children:hover > .sub-menu {
opacity: 1;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
visibility: visible;
}
global-nav .child-menu-button {
display: none;
}
この末尾にある「display: none;」が
問題なのかなとも思うのですが…
やり方がわからず困っています
教えていただけると嬉しいです＊
✩実行したこと
「「display: none;」を削除しても非表示のままです...
✩追加です
キャプションはこのようになっています。
✩追記です
このように表示されています
✩追記です
✩追記です
追加のCSSで書かせていただいたスクリーンショットになります
ありがとうございます><
テーマは「STORY」を使用させていただいております。
管理画面のキャプチャ...スクリーンショットですね、かしこまりました><
最後の「global-nav」というクラスを持った要素は出力されていますか?
という言葉がよく理解できないので調べさせていただきます><すみません
> HTML側に「global-nav」というクラスを持った要素は出力されていますか?
上記については、以下の手順で確認できます。
[1] Google ChromeかFirefoxでWebサイト (管理画面ではなく、一般の閲覧者が見るページ) を開く
[2] 右クリック > ページのソースを表示
[3] 表示されたソースコード内で「global-nav」を文字列検索
(Chromeの検証ツールを使えるのであればそちらでもかまいません)
わわ～><ありがとうございます
教えていただいた手順通りにしてみました
すると質問画面に貼り付けたようなスクリーンショットになっています。
この状態で出力されている、といえるのでしょうか？><
すみませんなにからなにまで
スクリーンショットはCSSの記述です。ほしいのは、HTMLの記述です。
<div class="global-nav">というような形の記述はありますか?
スクリーンショットの中で検索したのですが
<div class="global-nav">という記述はありません...！
<div class="global-nav xxxxxxxx xxxxxxxx">
<div class="xxxxxxxx global-nav xxxxxxxx">
というような形かもしれません。
HTML側に出力されていないのであれば、CSS側の問題ではなく、
WordPress側の設定が足りていないのが問題だと思われます。
現在の管理画面のスクリーンショットだと、必要な箇所が見えていないかもしれません。全画面をキャプチャすることが可能なら、そのようにお願いします。
ヘッダーやサイドバーのキャプチャが不可であればそこは削ってもOKです。
<div class=" ">
みたいなのはたくさんかいてあるのですが
肝心のglobal navがどこにあるのか分からずですみません。
URLはkomatuharuna.comです。
みられていただいても全く問題ありません><
ありがとうございます！
WordPress管理画面側の問題と思ったのですが、
CSS、JavaScriptの問題のようでした。
回答を追加したのでご確認ください。
いえいえ、こちらこそありがとうございます
CSSの問題と聞いて安心しました＊
回答2件
0
ベストアンサー
とりあえず、以下の記述を試してみてほしいです。
CSS
1@media only screen and (min-width: 1201px) { 2 .global-nav { 3 display: block !important; 4 } 5 .global-nav > ul > li > a { 6 color: #fff; 7 } 8}
まずスマホ時 (画面幅1200px以下) ではグローバルメニューは表示されているようです。
PC時 (画面幅1201px以上) のとき、問題が2つあります。
1つ目、下記手順で、PC時のときのグローバルメニューがJavaScriptにより「display: none;」になるようです。
[1] 画面幅1200以下のサイズにする
[2] 画面幅を1201以上にする
2つ目、グローバルメニューのリンクの文字色が、背景と同じ「#C5A2B1」となっているので、
表示されていても見えない (ホバーすると、文字色が白になるので見える)
..というのをいちおう解決するのが上記CSSです。
理想をいうと、JavaScript側で画面幅1200px以下→1201px以上に切り替わったときに
「display: none;」を消すという処理をしたほうがいいですが..。
投稿2020/03/10 14:31
編集2020/03/10 14:52総合スコア4528
ありがとうございます><大変丁寧に><
今１度追加CSSに追加してみましたが特にパソコン画面での変化がない状態です。><
スクリーンショットを追加させていただきました。
(夜の遅い時間帯なので私の質問はほんとに気にせず体を休めてください><)
まず念のため右側の「三本線」のアイコンをクリックすると、グローバルメニューが表示されます。
これがスマホ表示 (画面幅1200px以下) です。
PC表示 (画面幅1201px以上) は、管理画面だと画面幅が足りないようです。
管理画面ではなく https://komatuharuna.com/で、できるだけ画面幅を広げて表示してみてください。
こちらでは、グローバルナビが表示できているように見えます。
(ホバーしたときの色の修正は必要そうですが)
わ～～ありがとうございます。
拡大率が私が150%にしていたせいもあり縮小してサイトをみると見れました
すみませんでした><
（ホバーしたときの色は修正必要ですね><）
長らくお付き合いくださり、ありがとうございます。><
よかったです！
ありがとうございますー！*
0
以下、参考になるでしょうか?
公式:
https://design-plus1.com/tcd-w/faq/custom_menu.html
「グローバルメニュー」にチェックをするだけでは操作が不十分っぽいです。
投稿2020/03/10 13:11
総合スコア4528
あなたの回答
tips
プレビュー
