（応答）、モバイルデバイス上のWordPressのナビゲーションバーのアライメントを修正

ウェブサイト：モバイルデバイス上で閲覧するとwww.tarbooshla.com（応答）、モバイルデバイス上のWordPressのナビゲーションバーのアライメントを修正

、検索アイコンは、ナビゲーションバーの残りの部分（ロゴやメニューアイコンを整列していません）。これをどうすれば解決できますか？

私はすべてのテーマとプラグインを無駄に更新しようとしました。

2016-09-24 Matt

このレイアウトを変更するには、コードを書く必要があります。これは、CSSを介して行うことができますが、汚れたハックで。テンプレートファイルを編集してHTMLを知ることができれば、header.phpファイルを編集して要素を再配置することをお勧めします。 –

ブラウザがモバイルデバイスのサイズにリサイズされているときにロゴを左に押すことができるクイックフィックスはありますか？したがって、メニューと検索アイコンに十分なスペースを確保していますか？ – Matt

現在のルールセットで意図したとおりに表示されているようです。私はあなたが右にそれを設定したいと思っていますか？私はパッディングプロパティでそれを実質的に動かすことができましたが、それがあなたにとって最良のシナリオだとは思いません。検索アイコンは現在テキストではありませんが、::beforeシナリオで表示される擬似要素です。特定のサイズに達した後に表示するには、display:none;と::after疑似文字に設定するメディアクエリを使用することをおすすめしますあなたのスマートフォンに届くときに表示される要素@media and screen (max-width)サイズ

出典

2016-09-24 06:50:03 David

待ち、パディングプロパティを使用して正しく整列させることができますか？教えてよ。 – Matt

ああ、いいえ。 alignプロパティで正しく整列させることができませんでした。私はあなたがそれをどこに移したいのか正確にはわかりません。もしそれほど遠くないのであれば、私の知識と検査要素のクロムエクステンションでは動かないことを知らせていただけです。あなたのニーズは、htmlのリオーダー、おそらくいくつかの追加のcss、他のユーザーのように思えます。 – David

モバイルデバイスのスペースが限られているために起こっています。あなたができることはheader.phpの中に入り、メインバーの中にある検索バーを家、私たちなどに置くことですユーザがメニューボタンを押すか、cssの助けを借りて、検索ボタンが右に収まるようにメニューを左に揃えます。

出典

2016-09-24 06:58:30

ブラウザのサイズが縮小したときにロゴを左に押すとどうなりますか？ WordPressでファイルを編集することに慣れていない - CSSを使ってルールを調整する方法を知っている - ブラウザが縮小すると（モバイルデバイスのサイズに近い）、ロゴは左にあるので、検索アイコンとメニューアイコンのためのスペースが右にありますか？ – Matt

このコードは役に立ちます。このCSSコードを他のCSSがロードされた後にロードするようにしてください（したがって、最大限の優先順位をとります）

@media only screen and (max-width: 767px) { 
    #Top_bar .logo { 
     text-align: left; 
    } 

    #Top_bar .top_bar_left { 
     float: left; 
     width: 80% !important; 
     margin-top: 10px; 
     background: none !important; 
    } 

    .header-classiC#Top_bar .top_bar_right { 
     top: 15px; 
     float: right; 
    } 

}

出典

2016-09-24 08:53:55

（応答）、モバイルデバイス上のWordPressのナビゲーションバーのアライメントを修正

答えて

関連する問題