Here’s how to add a button in your WordPress header menu

Would you like to add a button in your WordPress header menu?

Adding a button in the header navigation menu allows you to create a more eye-catching call-to-action. It can get more clicks on your most important pages and create a better user experience by helping your visitors take action.

In this article, we’re going to show you how to easily add a button to your WordPress header menu.

Why add a button in the WordPress header menu?

WordPress navigation menus are usually plain text links that all look the same. In terms of design, all links are given the same meaning and weight.

Header navigation menu with simple links

What if you want to add a link to an online order form, a link to the login or registration page, or a buy now link? These important calls to action look exactly like the rest of the links in the header menu.

Converting important links to buttons in your WordPress navigation menu will make them more noticeable. This helps users find them easily and improves their engagement and experience on your website.

One button navigation menu

By default, WordPress offers options for adding buttons to WordPress posts and pages using the button block. However, it doesn’t have a built-in option to add buttons to navigation menus.

Fortunately, there is a simple hack to converting every link in your WordPress navigation menu into a button.

However, let’s take a look at how to add a button to your WordPress header menu without installing a plugin.

Add a button in your WordPress header menu

First, you need to paste the link that you want to convert into a button into your WordPress navigation menu.

Just go to the Appearance »Menus Page in your WordPress dashboard and add the link to your navigation menu.

Add a link to the WordPress menu

After that, you need to click the Screen Options button at the top. This will bring up a fly-down menu with a number of options. You need to check the box next to the “CSS Classes” option.

Show CSS classes in screen options

Now scroll down to your menu and click to expand the menu item you want to convert into a button.

Add a custom CSS class to a link

You will notice a new CSS class option in the menu item settings. Here you have to enter a class name. You can name this CSS class any unique name you want, but for this tutorial we’ll call it menu-button.

After entering a name, click the Save Menu button to save your changes.

Now that we’ve added our own custom CSS class to the menu item, we can design it by adding our own custom CSS code.

Just go to Appearance »Customize to start the WordPress Theme Customizer.

You will now see a live preview of your website on the right and a number of design settings in the left column.

Additional CSS option in the WordPress theme customizer

Now you need to click the Additional CSS tab to expand it. This will bring up a box for you to add your custom CSS code.

Here you can copy and paste the following CSS code as a starting point.

.menu-button {background color: # eb5e28; Frame: 1px; Edge radius: 3px; -webkit-box-shadow: 1px 1px 0px 0px # 2f2f2f; -moz-box-shadow: 1px 1px 0px 0px # 2f2f2f; box-shadow: 1px 1px 0px 0px # 2f2f2f; } .menu-button a, .menu-button a: hover, .menu-button a: active {color: #fff! important; }

Once you add the CSS code, the theme customizer will automatically apply it to your website preview and you can see the changes take effect.

Don’t worry, the changes won’t be available on your website until you hit the publish button.

Preview of the menu button

Feel free to play around with the CSS as much as you want. You can change the background color, link the text color, add a frame, and more.

Don’t forget to click the Publish button to save your changes.

Wasn’t that easy?

You can use this trick to not only add buttons to your header menu, but you can also use it to highlight any link in your WordPress navigation menu.

We hope this article has helped you add a button to your WordPress header menu. Would you like to see how users interact with your buttons? Check out our guide on How to Track Conversion Rate in WordPress. Next, check out our list of the best live chat software for small business.

If you enjoyed this article, please subscribe to our YouTube channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Comments are closed.