ナビゲーションバー下部とヘッダ領域上部の被りを解消したい

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など ナビゲーションバー下部とヘッダ領域上部の被りを解消したい

このトピックには3件の返信が含まれ、1人の参加者がいます。1 週、 2 日前 かうたっく さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #57389 返信

    kyan

    どうぞよろしくお願いします。
    下記サイトにおいてナビゲーションバーをヘッダ画像領域より上に表示するよう設定しましたが、表題のように両者が被ってしまいます。
    ヘッダ領域をナビゲーションバー表示領域より下にずらすのが解消方法かと思いますが、どのように設定したらよろしいでしょうか。
    (被らなければよいので、他によい方法がありましたらあわせてご教示いただけましたら幸いです)

    サイト
    https://sumibi.info/

    なお、ナビゲーションバーの位置変更に際して参考にさせていただいたサイトは下記のとおりです。
    http://e-farm.org/blog-entry-7005.html

    その他、解決に必要な情報がありましたら可能な限り提示させていただきます。

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

  • #57390 返信

    かうたっく

    こんにちは

    自分の環境で試したことは、PHPを触らずにスマホメニューを上に表示する方法しか試してません。そしてkyanさんのサイトは完全レスポンシブなので、スマホのnaviに関しても同じ状況です。

    https://bibabosi-rizumu.com/simplicity-mobile-menu/

    上記はスマホメニューのみ対応で、ご希望のPCメニューでのカスタマイズやってません。※PCナビの位置は個人的に位置変更の必要がないためです。

    PCのグローバルメニューもCSSでの変更だけで表示するのは可能だとおもいます。
    ※試してませんが、メリットはPHPを触らなくても良い
    ※親テーマで該当phpの更新を行われたとき有効にしたいとき、子テーマでまたカスタマイズのやり直しをしないで済む

    確認したら かぶっているというよりChromeでみれば表示されてないように見え、現状どちらにしてもCSSを追記が必要なような気がします。

    情報を探す場合、CSSだけ・なおかつ完全レスポンシブ対応にチェックが入っている情報を探すのも良いかもしれません。※PCビューで見てウィンドーの左右を小さくして見切れないサイトは完全レスポンシブです。

    検索が必要になる簡単な回答ですが、当初の(カスタマイザーでの)設定が違っているのでカスタマイズ後の表示が違うという話かと思われます。とだけ。

  • #57440 返信

    kyan

    かうたっくさん、こんにちは。

    ご回答ありがとうございます。
    当方のイメージしている内容と当初の設定にはズレがあると認識しました。

    CSSの追記が必要とのことでいくつか検索してみましたが、具体的にどこをどう手をつけたらよいかわかりませんでした。

    そこで一旦元の状態に戻した上で様子を見、検討し必要であれば時間を作って再チャレンジすることにしました。
    (実は、お返事を書く前に各種ファイルに追記した内容を削除してもナビゲーションバーが上に残ったままの状態が続き1日中頭を悩ませておりました…原因が特定できず、結局これまで変更したファイルを全て初期状態に入れ替え、再度必要な設定を施しましたが、そこで気力を使い果たしてしまいました^^;)

    表題の解決はしませんでしたが、コメントが道標となり方針が定まりました。

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

  • #57444 返信

    かうたっく

    よくわからないですが、とりあえずCSSをあてました。Chromeでしか確認してませんが。

    PCビューのみ適当に編集してみました。

    @media screen and (min-width: 1110px){
    	#container {
    		position: relative;
    		margin-top: 86px; /*head上の高さ*/
    	}
    
    	#container #navi {
    		position: absolute;
    		top: -80px;
    		right: 0;
    		left: 0;
    		height: 67px; /*ナビの高さ*/
    	}
    
    	#site-title a {
    		color: #ffffff; /*サイトタイトル見えなかったので白に*/
    	}
    
    	#site-description {
    		color: #ffffff; /*サイトディスクリプション 消してるのがもったいないので白に*/
    		display: block !important; /*display:noneの指定を消すと不要*/
    	}
    }

    ビフォー:https://gyazo.com/1a9b1a5e928f45731751babb0e4d6a2c
    アフター:https://gyazo.com/f299c3372efb2415533590576c9b5a65

返信先: ナビゲーションバー下部とヘッダ領域上部の被りを解消したい
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)