Twenty fourteen mobile menu icon to text

  • Resolved kepa37

    (@kepa37)


    8 years, 8 months ago

    People say to me that they somehow cannot find menu on my website when browsing on mobile devices. I use Twenty fourteen theme – of course there is a menu button, but people aren’t so clever, or it’s simple not intuitive. I would like to change the mobile menu button from “=” icon to simple “menu” text. Sorry for my english, polish native. Thanks in advance!

    1. I added in custom-css section something like that: .menu-toggle:before { content: “MENU”; } i think it overwrites the theme css, because of high priority of custom css. It changed the icon to text but if You look on my website http://www.bdk.brodnica.net using mobile browser there’s still some problem with align or box size, tried to add width: paremater, but still don’t work. The button is not fully showing. I would like it to be displayed properly on any device, but I’m not a master of code, just got the very old html/css intuition, whitch makes me kind of hard-coding retard

Viewing 1 replies (of 1 total)
  • Thread Starter kepa37

    (@kepa37)

    8 years, 8 months ago

    Ok, i found it, added following code

    .menu-toggle:before {
    color: #fff;
    content: “MENU”;
    padding: 16px;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    padding-top: 20px;
    }

    .menu-toggle {
    background-color: #000;
    border-radius: 0;
    cursor: pointer;
    height: 48px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    width: 70px;
    }

Viewing 1 replies (of 1 total)
  • The topic ‘Twenty fourteen mobile menu icon to text’ is closed to new replies.