How to make menu items into buttons

Occasionally, in your WordPress website, you’ll want to highlight certain menu items by giving them a button-like appearance.

Screenshot showing WordPress website menu with button item

I don’t know of any plugin to help with this (though there are so many plugins, who knows, there might be one). I do it with CSS (Cascading Style Sheets). Most themes let you define your own style rules to augment or override those defined by the theme. In my example I’m using Graphene theme, where this setting can be found in the Customize screen, at the end of the top level of navigation entries.

SHows location of Additional CSS in Customize

May appear elsewhere or have different label depending on theme.

Add the following rules to whatever you have there now:

/* Several rules to make menu items look like oval buttons. You must use the class name menu-button in the advanced menu properties in the dashboard to select which items this applies to. The first button also needs class menu-button-spacebefore to separate it from the normal menu items. */
li.oval-menu-button {
  background-color: gold;
  border-radius: 20px;
  margin-left: 5px !important;
  margin-bottom: 5px !important;
  margin-top: 7px !important;
  height: 35px !important;
}

li.oval-menu-button a {
  font-size: 14px !important;
  padding-top: 7px !important;
  color: black !important; /* text color of top menu buttons */
}

li.oval-menu-button a:hover {
  /* when user mouses over the button, text color changes to... */
  color: white !important;
}

li.oval-menu-button.active a {
  /* after they click the button and are on that screen, button color changes to... */
  background-color: transparent !important;
  /* and text color changes to... */
  color: white !important;
}

@media (max-width: 767px) {
  /* applies to phones and tablets -- you may need to adjust this number based on when the menu gets hidden behind a "hamburger" button. */
  li.oval-menu-button {
    display: inline-block;
  }
}

@media (min-width: 767px) {
  /* applies to PCs -- adjust number to match above rule. */
  li.oval-menu-button {
    /* spacing left of first oval menu button in menu -- you may want to adjust this. */
    margin-left: 50px !important;
  }

  li.oval-menu-button ~ li.oval-menu-button {
    /* spacing left of second and subsequent oval buttons */
    margin-left: 5px !important;
  }
}

Next, switch to the “dashboard” of your site and navigate to Appearance > Menus to create the menu item you want to format as a button. To apply the button formatting, you’ll need a field that’s not visible in Customize — the CSS Classes field. It’s also not visible in the dashboard by default, but you can use the Screen Options control at the top of Menus screen to make it visible.

Diagram showing how px numbers affect size and position.

In the menu item whose appearance you want to change, set the CSS class to oval-menu-button.

Screenshot showing how to set the CSS class of a menu item

The button has been designed to be the same height as other menu entries, given certain assumptions about the height. These assumptions work for the Graphene theme, which I’ve used for my example, but they may not work super well in your situation. Basically, every number in the CSS code that’s followed with “px”, you may want to play with. You just need to make sure the numbers add up. In particular, to keep the text vertically centered, you’ll need to add or subtract one pixel to the padding-top for every 2 pixels you change the font-size, and one pixel to the margin-top for every two pixels you change the height. But you can just eyeball it; the Customize screen is great for that because you can change numbers and see the result in real time.

Diagram showing how px numbers affect size and position.

Share...

Share: