Mój klient poprosił mnie o zastąpienie ikony hamburgera w menu mobilnym tekstem „Menu”, ponieważ uważa to za bardziej intuicyjne.

Używam motywu WordPress Kumle. W pliku „assets/ Third-party/meanmenu/jquery.meanmenu.js” udało mi się znaleźć ustawienie, które pozwala mi zdefiniować tekst wyświetlany po zamknięciu menu:

meanMenuOpen: "MENU", // text/markup you want when menu is closed

Jednak tekst „Menu” pojawia się dopiero po jednokrotnym kliknięciu i zamknięciu menu. Przed kliknięciem jest puste. Nawet hamburger się teraz nie pojawia.

Poniżej znajduje się część kodu CSS sterującego menu:

.mean-container a.meanmenu-reveal {
    color: #1e435a;
    cursor: pointer;
    display: block;
    font-size: 1px;
    font-weight: 700;
    height: 20px;
    line-height: 20px;
    padding: 20px 15px;
    position: absolute;
    right: 0;
    text-decoration: none;
    text-indent: -9999em;
    top: 0;
    width: 27px;
}
.mean-container a.meanmenu-reveal span {
    background: #fff;
    display: block;
    height: 1px;
    margin-top: 8px
}
a.meanmenu-reveal.meanclose {
    color:#fff;
}
.mean-container .mean-nav {
    background:#2c4450;
    float: left;
    margin-top: 60px;
    position: relative;
    width: 100%;
    z-index: 9999999;
}   
.mean-container .mean-nav ul {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
}

.mean-container .mean-nav ul li {
    float: left;
    margin: 0;
    position: relative;
    width: 100%;
}

Poniżej znajdują się zmienne obecne w js:

var defaults = {
                    meanMenuTarget: jQuery(this), // Target the current HTML markup you wish to replace
                    meanMenuContainer: 'body', // Choose where meanmenu will be placed within the HTML
                    meanMenuClose: "X", // single character you want to represent the close menu button
                    meanMenuCloseSize: "18px", // set font size of close button
                    meanMenuOpen: "MENU", // text/markup you want when menu is closed
                    meanRevealPosition: "right", // left right or center positions
                    meanRevealPositionDistance: "0", // Tweak the position of the menu
                    meanRevealColour: "", // override CSS colours for the reveal background
                    meanScreenWidth: "480", // set the screen width you want meanmenu to kick in at
                    meanNavPush: "", // set a height here in px, em or % if you want to budge your layout now the navigation is missing.
                    meanShowChildren: true, // true to show children in the menu, false to hide them
                    meanExpandableChildren: true, // true to allow expand/collapse children
                    meanExpand: "+", // single character you want to represent the expand for ULs
                    meanContract: "-", // single character you want to represent the contract for ULs
                    meanRemoveAttrs: false, // true to remove classes and IDs, false to keep them
                    onePage: false, // set to true for one page sites
                    meanDisplay: "block", // override display method for table cell based layouts e.g. table-cell
                    removeElements: "" // set to hide page elements             };

W razie potrzeby mogę podać link do strony, aby sprawdzić problem na żywo. Następnie kliknij prawy róg czerwonego paska poniżej „wybierz język”. Spowoduje to rozwinięcie menu mobilnego. Kiedy go zamkniesz, pojawi się tekst „Menu”, ale potrzebuję, aby tekst tam był od pierwszego załadowania.