WordPress 手機選單增加文字

WordPress 手機的選單經常長成三條橫線的樣子,在畫面左上角或右上角。因為長得像漢堡,我們稱它為漢堡選單。
這對經常上網的人沒有問題,但對於不是經常上網,或是年紀較長的使用者來說,有可能根本不知道那三條線就是選單的意思。
如果不知道要點那邊叫出選單,有可能因此找不到想要的資料。
如果能在那三條線旁邊出現一個小小的 Menu 字,或許就是在簡潔性和使用者友善介面間取得一個平衡。

首先我們用 Chrome 瀏覽器的「滑鼠右鍵 > 檢查」功能來看看這三條線旁邊可不可以加東西。
如果不知道怎麼使用「檢查」功能請參考之前的文章:自訂CSS 調整 WordPress 文字、顏色、背景、寬度等

*我用的佈景主題是「Hueman」,如果不是用此佈景主題,版面可能會略有不一樣。

我們在三條線的旁邊看到原本就預留一個<div>,而它套用的 CSS 是「nav-text」

所以我們要到「外觀>自訂>進階選項>附加的CSS」從CSS去增加文字。

@media only screen and (min-device-width : 320px) and (max-device-width : 600px) {/*以螢幕寬度來判斷是否為手機*/
/*以下字型大小和位置可以自己調整*/
.nav-text {
display:inline;
position: absolute;
right: 40px;
top:2px;
color:#aaa;
font-size: 0.7em;
padding: 13px 2px;
}
.nav-text::after { content: "Menu"; }/*如果要用中文就把「Menu」改為「選單」*/
}

我們可以看到已經在三條線的左邊出現「Menu」字樣了。

我設定的字體比較小,如果你想要它明顯一點,可以把字體加大。

延伸閱讀:CSS 偽元素:before, after