移动菜单图标问题

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，试试看，并告诉我哪些工作。