How to Add a Button in Your WordPress Header Menu

add a button in header menu

When a visitor land on your page, your header plays a critical role in navigating through the website. By incorporating a well-designed button, you can not only make your menu more visually appealing but also direct your audience to important sections, encourage them to take specific actions, or even promote special offers and events.

If you don’t know how to add a button in your WordPress header, then this post is just for you. Here, I have shown the whole process for block editor step by step. 

Let’s start. 

Adding a Button in Your WordPress Header

You can add a button to your menu by creating everything from scratch, or you can customize your existing menu and then add a button. Here, I am showing you to add a button from scratch. 

Step 1: Open The Editor

From your WordPress dashboard, navigate to Appearance -> Editor.

Step 2: Open The Header Menu

Now click on, Template Parts. 

Choose Header. 

Step 3: Delete everything

First, delete everything in the header. You can delete it by selecting the block and pressing the ‘Del’ button. 

Step 4: Add a Row

Click on the Add Block button and search for ‘Row’. Insert the block by clicking on it. 

Step 5: Add The Site Title

If you want to put a title on the first block, just click on the block and search for the ‘Site title’ block. 

Then insert the block by clicking on it. 

Step 6: Add a Header Menu

Again click on the Add block button and insert the ‘Navigation’ block. 

Step 7: Add a Button in The Header

In this step, click on the header and then again click on the three dots (option).

You can add a button before or after the header menu. If you like to add a button after the menu, then click on ‘Insert after’. 

Now, click on Add Block (‘+’ sign) and insert the button block. Customize the button according to your needs. 

Step 8: Bring Button Close to Header Menu

One thing you will notice is that there is a gap between menu items and button. 

If you want to bring the button closer to the menu items, then Select the group and Justify the item to the left or right. 

I have justified the item to the left. After then, click on the save changes button to save your changes. 

If you want to customize the existing menu and then add a button, then follow step 1, step 2, and then jump to step 7, and continue to add the button. 

Final Words

I hope this post will help you to add a button in your WordPress header menu. If you face any problems, comment below, and I will be happy to help you. If you liked the post, share it with your friends so that they can also do it on their own. 

Own a WordPress Site? You’ll Need This Plugin!

Unleash the power of the WordPress Block Editor with Ultimate Blocks! Dive into a world where crafting stellar content is a breeze, where every feature and tool you’ve dreamed of is right at your fingertips.

Leave a Reply

Your email address will not be published. Required fields are marked *