移動菜單圖標問題

Question

這個移動頁面上工作：

http://mockup.comule.com/（！可能包含彈出式廣告）

目前只工作在移動方面。在移動視圖中，顯示黃色菜單'Hamburger'圖標。我從其他地方複製了它的CSS。在使用之前，「菜單」一詞就在其中。我沒有刪除這個詞 - 圖標替換/覆蓋它。

的HTML標記仍然顯示文字「菜單」的存在：

菜單

新添加的CSS：

.handle { 
    background-color: #990000; 
    font-size: 0; 
    line-height: 0;text-align:right; 
    padding: .75rem .5rem; 
    display:block; 
} 

.handle:after { 
    content: ""; 
    border-color: yellow; 
    border-style: solid none double; 
    border-width: 4px 0 12px; 
    display: block; 
    height: 4px; 
    width: 2rem; 
} 

我要的是菜單圖標出現在右在酒吧的手邊和「菜單」一詞重新出現在左邊。

什麼需要改變才能發生？

在此先感謝。

Answer 1

「菜單」寫在右邊左邊和菜單圖標，這個嘗試以下操作：

.handle:after { 
    content: ""; 
    border-color: yellow; 
    border-style: solid none double; 
    border-width: 4px 0 12px; 
    display: block; 
    height: 4px; 
    width: 2rem; 
    float: right; 
    margin-top: -4px; 
} 


.handle { 
    background-color: #990000; 
    text-align: left; 
    padding: .75rem .5rem; 
    display: block; 
    line-height: 1.5em; 
    text-transform: uppercase; 
    font: 90%/1.3em Arial, Helvetica, sans-serif; 
    color: white; 
    font-size: 1em; 
} 

而對右邊和左邊圖標的「菜單」，試試這個：

.handle:after { 
    content: ""; 
    border-color: yellow; 
    border-style: solid none double; 
    border-width: 4px 0 12px; 
    display: block; 
    height: 4px; 
    width: 2rem; 
    float: left; 
    margin-top: -4px; 
} 


.handle { 
    background-color: #990000; 
    text-align: right; 
    padding: .75rem .5rem; 
    display: block; 
    line-height: 1.5em; 
    text-transform: uppercase; 
    font: 90%/1.3em Arial, Helvetica, sans-serif; 
    color: white; 
    font-size: 1em; 
} 

也只是爲了告知，我不確定「.handle：after」中的「margin-top：-4px」，它可能是-4px或-18px，試試看，並告訴我哪些工作。