Close Menu
  1. Adding Menu Buttons

Adding Menu Buttons

You can change any link in your page navigation to into a button.

A normal menu.

A standard menu.

A site with a menu button.

The ‘Blocks’ navigation link as a button.

Oftentimes, you’ll want to set an important link in your navigation apart from the rest. The best way to do this is to make it a button, which will adopt the button style you’ve set in your customizer. We recommend making this link either the first or last item in your menu, depending on whether you have your menu on the left or right side of your website, respectively.

Walkthrough

Although it might seem like a simple task, there’s actually a few steps that you’ll need to walk through to first enable menu buttons, and then set one.

Find the menus editor.

1 Open the Menus editor

From your admin dashboard sidebar, you’ll find the Menus editor under AppearanceMenus. If you can’t find your dashboard sidebar, you might need to toggle Fullscreen Mode.

The screen options toggle.

2 Open Screen Options

From the top of the Menus editor page, open Screen Options. You’ll find it in the upper righthand corner.

Enable css classes for menu items.

3 Enable CSS Classes

In the Screen Options pane, ensure that CSS Classes is enabled under the ‘Show advanced menu properties’ section.

Expand the menu link.

4 Open the Menu Link

Scroll back down to your menu and open advanced options for the menu link you’d like to turn into a button by by expanding it. Expand the link by clicking on the icon on it’s right hand side.

Add the menu-button class.

5 Add the menu-button class.

In the CSS Classes input, enter menu-button. This will add a class to the menu item on the frontend of your site that tells it to render as a button.

Save your menu changes.

6 Save your changes.

Don’t forget to save your changes before you leave!

Adding Menu Buttons