固定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，並將搜索欄放在主導航欄中，並伴隨家庭，關於我們等，這樣搜索就會出現一旦用戶按下菜單button.or或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的導航欄對齊（響應）

回答

相關問題