重新調整菜單重疊標誌

左側標誌，右側菜單。菜單變爲600px的移動菜單，低於徽標，但在600px和800px之間，菜單與徽標重疊，似乎無法解決該問題。重新調整菜單重疊標誌

我做了一些研究，認爲它可能與浮動屬性有關，菜單設置爲浮動右側，並且沒有浮動標誌，但當我浮動徽標或div纏繞它打破了佈局的標誌。我覺得它應該是一個簡單的解決方案，但我似乎無法弄清楚，任何幫助將不勝感激。

由於

來源

2014-03-05 user1048696

一種解決方案是有菜單變化在800像素，而不是600px的，如果那是你的菜單中斷的時候。 –

兩側固定寬度，和容納兩個親本是柔性的（根據窗口寬度）。正如你所知道的，當它變小時，它們會重疊。有幾種解決方案。

1：轉換父到固定寬度

這將修復父爲特定寬度，標誌和菜單將永遠不會得到緊密聯繫在一起。

2：轉換的標誌和菜單靈活

這將導致標識和菜單與父母一起在寬度改變，所以任何事都不能命中。但它不會與菜單一起工作，因爲文本不能設置爲寬度的百分比（除非您使用Javascript）。

3：使用另一個媒體查詢

最終媒體查詢踢，現場變成一個移動版本。查看菜單和徽標開始重疊的寬度。設置媒體查詢以將徽標更改爲更小的寬度。我會說750px是一個很好的折點。

@media screen and (max-width: 750px) { 

    .lcla-logo { 

     width:300px; 

    } 

    #menu-splash li { 

     margin-left:3px; 
     margin-right:3px; 

    } 

}

enter image description here

來源

2014-03-05 20:18:04

你或許應該這樣做 - >

@media screen and (max-width: 800px){ 
    .lcla-logo{ 
       width:70%; //you can change this according to you 
       margin: 5px auto; //for centering your logo 
    } 

    //---------------------------------- 
    // AND here change your menu to mobile menu 
    //--------------------------------- 

}

這可能會解決你的問題

來源

2014-03-05 20:22:48

如果您降低屏幕寬度，它已經變爲600px的移動。 –

但是，由於您的徽標占用了較小的寬度，因此您最好在800px以上將其拆分爲600px。 –

是的，但添加它會破壞東西，除非他也切換到移動菜單。最好找到現有的轉換並更改號碼。或者添加第二個斷點。 –

重新調整菜單重疊標誌

回答

相關問題