Css 移动菜单图标问题

正在使用此移动页面：

（可能包含弹出窗口！）

目前只在移动方面工作。在移动视图中，显示黄色菜单“汉堡”图标。我从别处复制了它的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;
}

我想要的是菜单图标出现在工具栏的右侧，单词“menu”重新出现在左侧

为了实现这一点，需要改变什么

提前感谢。

左侧写有“菜单”，右侧写有菜单图标，请尝试以下操作：

.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;
}

---

另外，我还不确定“页边空白：-4px”的位置。句柄：在“之后”，它可能是-4px或-18px，请尝试一下，让我知道哪个有效。

非常感谢。使用的是-4px。我原本以为我必须使用z索引，因为“菜单”是隐藏的！！！！再次感谢。。。