Learn How to Add a Button in WordPress Header Menu Bar

Do you want to add a button to your WordPress header menu?

You are adding a button in the WordPress blog/website header navigation menu bar because it’s a more noticeable call to action. It can get more clicks to your important pages and create a better user experience by helping your visitors take action.

In this article, I will show you the best way to add a button to your WordPress header menu easily.

Why Need To Add a Button in WordPress Header Menu Bar?

You See WordPress navigation menu Bars mostly have plain text links that all look the same and not much attractive. In terms of design, all the links have the same importance and weight.

By default, WordPress has only options to add buttons in WordPress posts and pages using the Buttons block and other page builders. However, it does not have a pre-built-in option to add buttons in navigation menu bars.

But you did not need to worried about anything because it’s very easy with only a few steps.

Let’s see how we able to add a button in your WordPress header menu bars without installing any Plug-in.

Learn Adding a Button in Your WordPress Header Menu Bar

The first thing is you need to add a simple link that you want to convert into a creative button into your WordPress navigation menu bar.

Learn How to Add a Button in WordPress Header Menu Bar

Learn How to Add a Button in WordPress Header Menu Bar

After that, you need to click on the Screen Options button at the top. It shows you a bunch of options. You just need to check the box next to the “CSS Classes” option.

Learn How to Add a Button in WordPress Header Menu Bar

Learn How to Add a Button in WordPress Header Menu Bar

The second thing is you go to the Appearance » Menus page in your WordPress dashboard and add the link to your navigation menu bar.

Now, you need to scroll down to your WordPress menu and click to expand the WordPress menu item that you need to change over into a creative button.

Learn How to Add a Button in WordPress Header Menu Bar

Learn How to Add a Button in WordPress Header Menu Bar

You’ll notice a CSS class option in the menu item in settings. Just you need to enter here a class name. You can call this CSS class with any unique name you want.

After entering a class name, then click on the “Save Menu” button to save your changes.

Since we have added our own custom CSS class to the menu, now we can easily design it by adding our own custom CSS code.

Now you simply need to go in Appearance » Customize for launch the WordPress theme customizer.

You see a live preview of your site on the right and a bunch of theme settings in the left column.

Now you need to click on the Additional CSS tab to expand it. This will show you a box area where you can add custom CSS code.

Here, you able to copy and paste the following CSS code and also able to write your own CSS 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;
}

When you add your CSS code, then the theme customizer will automatically apply this into your website preview, and you able to see the live changes take effect on your website.

Don’t worry. These changes won’t be live on your website until you press the Publish button.

Learn How to Add a Button in WordPress Header Menu Bar

Learn How to Add a Button in WordPress Header Menu Bar

Play around with the CSS however you like if you want to make a different look like You want to change background color, link text color, add a border, and more.

After done your changes, Don’t forget to click on the Publish button to save your changes.

I hope you understand now how to add a button to the WordPress navigation bar. If you still need more help then contact WordPress Expert who can help you to resolve the issue at a reasonable price.

Leave a Reply