How to Add a Button in WordPress Header Menu?

0
199

Are you thinking of a way to add a button to WordPress header menu?

Basically, the addition of a button creates a more noticeable call to action. Buttons at the headers are more likely to be visited by the user as it lies at the top of the post so, it is definitely one of the things users see after visiting the page.

This system provides a better user experience as well as maintains the ranking of the post. We will cover the easiest way to add a button as well as mention the suitable to add them in your WordPress header menu.  

Reason to Add a Button in WordPress Header Menu

The text in the WordPress navigation menu is plain type. Additionally, the main motive of adding a button is to create an easy path for users which fulfills their desired action and also leads them to a specific page with just one click. 

Furthermore, another main use of adding buttons is they are attractive and immediately grab the attention of the user. In simple words, the button highlights the key points like changing the important links into buttons usually makes them more noticeable. 

There is an option in WordPress to add buttons in posts and pages by default. However, there is no built-in option to add buttons in navigation menus. Moving towards the steps of adding buttons in the header menu:

Steps to Add a Button in Header Menu

Here are the steps:

  • Navigate to Appearance >> Menus page to add a link to your navigation menu.
  • Click on the Screen Options at the right top corner which will reveal a bunch of options among them you need to select the “CSS Classes” option.
  • Next, scroll down until you reach your menu and click it in order to expand the menu item you want to turn into a button. On the next page, you will find a new CSS class option where you need to enter a class name. Make sure you save the menu.
  • Now it’s time to design a custom CSS class with the help of custom code. Firstly, head to Appearance >> Customize.
  • Click on the “Additional CSS” tab to expand it, you will find a box where you need to add custom code.
  • Copy and paste the code mentioned below 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;

}

  • You will immediately notice the changes in the website preview. But, there won’t be any changes in your real website until you click on the “Publish” button. 

Hence, you have successfully added a button on the WordPress header menu. Moreover, this method is also applicable to highlight any link in the WordPress navigation menu.  

Wrapping up

Lastly, we hope this tutorial helped you to add a button to the WordPress navigation menu. Also, if you want to have more information about the navigation menu do visit our article “How to Add Navigation Menu in your WordPress Website?” for more detailed information. 

LEAVE A REPLY

Please enter your comment!
Please enter your name here