How to Add a Button to the Header in WordPress

If you want to add a call to action to your WordPress site and put it somewhere easily noticeable, your website’s header area is a perfect place to do so. Located at the top of every website page, the header is usually one of the first things people see when opening a page. This makes it a natural place for adding some important elements such as your site title and headline, your main website navigation, your brand logo, and of course, your CTA buttons.

The entire purpose of adding a button in the first place is to get your visitors to take the desired action and lead them to a specific page on your site (or outside of your site) by clicking on it. Thus, you have to make your button instantly visible on your page to attract the attention of your visitors and get them to click on it to drive more conversions. This means that the design of the button should allow it to stand out from other standard-looking links that may appear in your header menu.

Now, by default, WordPress does not come with the ability to add individual buttons to your header area. Instead, you can add a navigation menu to your header with links that feature the same design. Still, there is a way to “transform” a menu link in your header navigation menu and make it appear as a button. Luckily, this is easy to do if you use some custom CSS. So, this time around, we are going to show you how to add a button to your WordPress header navigation menu. Right after, we will also demonstrate how to insert and customize a button widget into any other header area of your choice (aside from adding it right next to your navigation menu) using the Bridge theme. So sit back, relax, and read on.

Adding a Button in Your WordPress Header Menu Using Custom CSS

To start transforming your menu link into a button, you should insert the menu link you want to use by going to Appearance >> Menus. Then, add a link to a previously created navigation menu.

If your menu already contains a menu item that you want to change into a button, simply hit the arrow on your menu item to expand and edit it.

If you have yet to create your menu item, you can either find it on the left side of your screen (by finding it in Pages, Posts, etc. – depending on whether your menu item leads to a page, post, or another post type) and then clicking the Add to Menu button. In case you want to link to a page outside of your site, you can choose the Custom Links dropdown and insert your URL and link text manually, then click on Add to Menu.

Next, make sure to give a Navigation Label to your item (if you haven’t already).

Once you do this, you should go ahead and access the Screen Options button (located at the top of the screen). Make sure that the box that says “CSS Classes” is marked. This will allow you to add a custom CSS class to your link and then style it in any way you like.

Now, in the menu item settings, you will be able to see the new CSS class option. Insert a name for your menu class (ours is header-menu-button, but you can assign any unique name of your choice here).

Hit the Save Menu button to save your settings.

Next, you should customize the look of your header menu button using some custom CSS code. Go to Appearance >> Customize to access your WordPress theme customizer and hit the Additional CSS button.

Insert your custom CSS code here and then click on Publish. You should note, however, that this will instantly make all your changes appear live, so be sure to hit this button only after you’re completely satisfied with the look of your header menu button.

If you want, you can feel free to insert our CSS code, or change it in any way you like to fit your design preferences (change its border and border radius, background and text color, and so on):

.header-menu-button { 
background-color:#86af49;
border:1px;
border-radius:25px;
}
.header-menu-button a, .header-menu-button a:hover, .header-menu-button a:active { 
color:#fff !important;
}

We’ve opted for the green-colored button (that perfectly matches our layout) and the plain white color of the button text. Also, we’ve set a border-radius of 25px to make our button have slightly rounded edges. You should note that the more you decrease the number of pixels, the sharper the edges will be, while increasing the number of pixels will make your button have a more rounded shape.

Right after adding your CSS code and hitting Publish, you will be able to see what your button will look like in the website preview.

Adding a Button to Your Header Using Qode Themes

We’ve mentioned at the very beginning that WordPress does not come with the option to add a button to your header area out of the box. That being said, some WordPress themes do come with many additional features meant to further expand the functionality of WordPress in various ways. For example, in the case of Qode themes, there is a widget called Qode Button that allows you to add and customize a button directly into your header area. We will show you how to do this using the Bridge theme, so make sure to read on.

Now, right off the bat, we should mention that Bridge (as well as many other Qode themes) contains multiple custom widget areas you can use to add different widgets to your site. When it comes to the website header in particular, it consists of two main areas – header top and header bottom. Then, these areas are further divided into Header Top Left, Header Top Right, Header Bottom Right, and Header Bottom Center widget area. You will be able to add widgets to any one of these areas by going to Appearance >> Widgets.

If you’re using Bridge and you don’t see some of these areas in your list of widget areas, there is a chance that one of the header areas (usually a Header Top) is switched off. You need to make sure that this area is showing by accessing Qode Options >> Header in your WordPress dashboard.

Then, find the Header Top section and switch the Show Header Top Area to Yes.

There are many other options here related to your Header Top area that you can adjust according to your preferences, such as the background color, padding, the ability to hide it on scroll, and others.

Of course, you will also find other options related to the Header Bottom area as well as other general header options, such as the ability to change its border color, transparency, set it to be in grid, and so on.

Once you’re satisfied with your settings, hit the Save Changes button.

Now, let’s see how you can add a button to one of these widget areas using the Qode Button widget. You can add this button to any Header widget area you like. We are going to demonstrate adding a button to the Header Bottom Right widget area, which will make our button appear right next to the header navigation menu. This is one of the most common areas for adding a button to a site, which is fairly logical since the navigation menu itself is one of the most easily noticeable website elements.

To do this, find a Qode Button widget, pick your widget area (Header Bottom Right) and hit the Add Widget button (or simply drag it to the widget area on the right).

Using the Qode Button widget options, you will be able to set the size of your button, add your button text, link, change its colors (hover color, background color, etc.), and plenty more.

Hit the Save button once you’re done with setting your button widget options, and go ahead to see what your button looks like live.

Of course, as we’ve already mentioned, you can easily add your button to any other available header widget area. For example, here’s what our button looks like once we’ve added (and customized) our Qode Button widget into the Header Top Left widget area (the same way we did for our Header Bottom Right area):

As you can see, our button is now placed above the logo on the left.

Or, here’s the look of our button when added to the Header Top Right widget area:

Of course, you can use the same custom CSS option that we used in the first method on one of our themes (to turn your menu item into a button), but the Qode Button widget is a much simpler option as it allows you to style your button in any way you like without using any code. Moreover, as you could see from our picture examples above, you can place it anywhere you want in your header.

Conclusion

No matter if you want to add a link to a sign-up form, a purchase button, or any other type of CTA, your header is one of the best places to draw attention to your button and motivate your visitors to take action. In essence, adding a button to your header menu is easy – all you need to do is transform your existing menu item by assigning it some custom CSS class and then style your button using the Appearance >> Customize screen. Still, if you’re using (or plan on using) one of our themes, you will have much more customization options at your disposal and also get to quickly and easily place your button in any widget area of your choice (not just your header menu). So, choose your preferred method and follow our instructions carefully so that you can add a prominent CTA to your header that will help improve the user experience and boost your conversions.