WordPressテーマSANGOの質問

ヘッダーが横一列に表示されない

アバター
PERZIK_Sen

お疲れ様です。
以前もご対応ありがとうございました。
今回なのですが、ヘッダーロゴを左に配置した場合に、
メニューが一段下表示されてしまいます。
この記事のように横一列に表示するにはどのようにすればよろしいのでしょうか?
明後日まで今の現状で保留しておきますので確認し、
教えていただけると嬉しいです。

メニューの設定方法
メニューの設定をしよう
コメントへの回答
サルワカくん
サルワカくん
2021/08/30

お世話になっております。

管理画面>外観>カスタマイズより、サイトの基本設定>基本情報とロゴの設定に進んでいただき、「大画面表示時にもロゴを中央寄せ」のチェックを外していただくと左にロゴ右にメニューが横並びで表示されます。もしチェックを外しても症状が改善されない場合、CSSのカスタマイズが影響している可能性があります。
よろしくお願いします。

アバター
PERZIK_Sen
2021/08/30

style.cssに入れているカスタマイズを全て取って確認してみましたが、
現在同様横一列に表示されることはなく、一段下にずれている現象となっていました。
header.phpの方に何かしら入れているわけでもなのですが、これは改善不可能と
いうことなのでしょうか?

サルワカくん
サルワカくん
2021/08/31

お世話になっております。
SANGOテーマ自体では横一列で表示されていることを確認済みなので、何かしらのカスタマイズが影響しているかと思われます。
外観>カスタマイズ>追加CSSに何かCSSを入力されている可能性はないでしょうか?
よろしくお願いします。

アバター
PERZIK_Sen
2021/08/31

追加のCSSの確認を行ったところ少しだけ入っていたので、全て消しました。
それにより、右側に出ているメニューがかなり上に出ている感じに今度はなり、
やはり横一列にはなりませんでした。

サルワカくん
サルワカくん
2021/09/01

お世話になっております。
ご確認ありがとうございます。
追加CSSで以下のようなCSSが記述されているように見受けられるのですがいかがでしょうか?
以下のような高さに関する記述を消してみてください。


#logo,
#logo img,
.desktop-nav li a {
height: 170px
...
}
...
#logo,
#logo img,
.desktop-nav li a,
#drawer__open {
height: 100px;
...
}

よろしくお願いします。

アバター
PERZIK_Sen
2021/09/02

ご返信ありがとうございました。
おかげさまで、横一列表記にすることができました。

最後の質問なのですが、
横一列となるとロゴが小さいため大きくしたいと思っております。
しかしロゴ単体を大きくするとヘッダー下線がロゴの部分だけ下に下がってしまうので、
全体的にヘッダーの幅を広くしたいです。
どこのCSSをいじれば、横一列表記のままヘッダーの幅を広くし
ロゴの大きさも大きくすることができるのでしょうか。

毎日ご質問誠に申し訳ございません、
何卒宜しくお願い致します。

サルワカくん
サルワカくん
2021/09/03

お世話になっております。
サポートさせていただきたいのですが、
追加CSSにてCSSをカスタマイズされているのでなかなか該当の修正ポイントをお伝えすることが難しいですし、
CSSの具体的な書き方まではフォーラムでのサポート対象外になります。
ポイントでお伝えすると、#logoに対してheightとline-heightを指定し、.header-logo__imgに対してもheightを指定します。
そして、.desktop-nav li aに対しても同様にheightとline-heightを調整します。
こうすることで画像が縦方向に大きくなり、それに合わせてヘッダーメニューの位置も適切な位置に表示されるかと思います。
以上になります。よろしくお願いします。

アバター
PERZIK_Sen
2021/09/05

本当にありがとうございます。
納得のできるヘッダーを作ることができました。