fbpx

How to Add a Button in Your WordPress Header Menu

WordPress / By / add a button in your WordPress header menu, Why Add a Button in WordPress Header Menu?, WordPress header menu, WordPress Tutorial
How to Add a Button in WordPress Header Menu

Are you looking for a way to add a button in your WordPress header menu?

Adding a button in the header navigation menu allows you to build a more observable call to action (CTA). The CTA can help receive more clicks to your most significant pages and create a more enhanced user experience by helping your site visitors take action.

In this blog post, we will explain to you how to easily add a button to your WordPress header menu.

Why Add a Button in WordPress Header Menu?

WordPress navigation menus are generally plain text links that look alike. In the terms of design, all the links are offered the same importance and weight.

But, what if you ever wished to add a link to an online order form, a login or sign up page link, or a buy now link button? These remarkable CTA will resemble just like the rest of the other links in the header menu.

As a default, WordPress offers you to provide additional buttons in WordPress posts and pages utilizing the buttons block. But, it doesn’t have a default option to add buttons in navigation menus.

Fortunately, you can convert any link to your WordPress navigation menu into a button.

Having said that, let’s have a look at how to add a button in your WordPress header menu without installing a plugin.

Also read:

Adding a Button in Your WordPress Header Menu

Firstly, you will have to add the link that you wish to convert into a button into your WordPress navigation menu.

Just navigate to the Appearance >> Menus page in your WordPress dashboard and add that link into your navigation menu.

Then, you will have to click the Screen Options button which will be available at the top. A fly menu with several options will be shown. You just have to check the box next to the ‘CSS classes’ option.

Now, scroll down to your menu and click on it to expand the menu item that you wish to convert into a button.

You will observe a new CSS class option in the menu item settings. Here, you will have to enter a class name. You can name the CSS class with your preferred name, however for the sake of this tutorial we will call it menu-button.

On entering a name, click the ‘Save Menu’ button to store the changes you did.

Now, as we have added a custom CSS class to the menu item, we can design it by adding custom CSS code.

Just navigate to Appearance >> Customize to launch the WordPress theme customizer.

Now, you will be able to see a live preview of your site on the right and few theme settings in the left column.

Next, you have to click on the Additional CSS tab to expand it. This will display you a box where you can add your custom CSS code.

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

.menu-button {
background-color:#eb5e28;
border:1px;
border-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;
}
On adding the CSS code, the theme customizer will automatically apply it to the website preview and you can see the changes take effect.

Note: The changes won’t reflect your live site till you click on the Publish button.

Don’t hesitate to experiment with the CSS. You can even modify the background color, link text color, add a border, and more.
Make sure that you click the Publish button to save your changes.

Conclusion

We hope this article on how to add a button in your WordPress header menu helped you add a button in your WordPress header menu.

Additionally, you can check out our Managed WordPress Hosting plans.