Add a header menu button

  • header
  • button
  • customizer
  • navigation
  • site-editing

Updated

To add a button to your header menu, such as Contact, Donate, Shop, or Book Now, go to Appearance → Customize → Header & Menus → Button, turn on Enable, and set its text and link. It sits next to your main menu on every page. You set it in the Customizer, not under Appearance → Menus. If your logo and menu aren't set up yet, start with Add your logo and set up the site header.

Add the header button

  1. Go to Appearance → Customize → Header & Menus → Button.
  2. Turn on Enable.
  3. Enter Text. Keep it to a word or two.
  4. Enter URL, either a full link or a path on your site like /contact/.
  5. Choose a Style: Default, Alternate, Hollow, White, Ghost, or Subtle.
  6. Click Publish.

On desktop the button sits beside the menu. On phones it appears inside the mobile menu. Check both in the Customizer preview.

Can I turn a menu link into a button?

To turn a link that's already in your menu into a button instead:

  1. Go to Appearance → Menus.
  2. Open Screen Options at the top right and check CSS Classes.
  3. Open the menu item and type is-style-button into CSS Classes. For another style, add a second class after it, such as is-style-button is-style-hollow (or is-style-alternate, is-style-ghost, is-style-white).
  4. Click Save Menu.

On other WordPress themes, the CSS Classes field works the same way, but the class name that styles a link as a button depends on the theme.

Tips

  • The Style options use your site's button styles from Styles → Buttons. If the colors look wrong, adjust them there.
  • If your utility nav already has a strong call to action, pick a quieter style or leave the button off.
  • Regular menu links still belong in the menu. See Edit WordPress menus.

Built by Dirigible Studio. Get in touch