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」字樣了。
我設定的字體比較小,如果你想要它明顯一點,可以把字體加大。