Changing layout of the menu button?

  • Resolved room101

    (@room101)


    9 years, 7 months ago

    Hello,

    Thank you for a beautiful theme first of all!
    I was wondering if it is possible to change the layout of the menu button? My website caters to various age groups, and I’m worried that the older segment might not understand that the button represents a menu, so it would be great if I could change it so it displays the word “menu” instead of the horizontal lines.

    Thanks a lot

    /Frederik

Viewing 3 replies - 1 through 3 (of 3 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi Frederik, this is pretty easy to do on Tonal with a couple of CSS rules.

    #menu-nav::before {
    content: "Menu";
}
.button-block {
height: 45px;
width: 80px;
}

    Depending on the design of your header area, the above may end up overlaying your title and/or tagline on phones. If so, you will have to make adjustments to the size of the button or your title/tagline.

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    If you wish to move the button up to avoid a collision with your title or tagline, look through your theme’s existing CSS for media queries that contain

    #menu-nav {
top: XXpx;
}

    XX of course being a value like 60 or 80. You can then create your own media queries in your custom CSS with different values that move the menu button up.

    Also, for those who are trying this, you might want to check that it doesn’t overlay your header in smaller screens, tablets, phones etc.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Changing layout of the menu button?’ is closed to new replies.