Adding a button in the header navigation menu

The header navigation menu is WordPress is an often unutilized piece of website real estate. While most web managers use it solely for navigation, you can also add a search bar or even promotional content. But, in order to do so effectively, you ought to consider adding a button in the header navigation menu. In this article we will elaborate on why doing so is beneficial, and how to do so properly.

The benefit of adding a button in the header navigation menu

Having a button in the header navigation menu may seem like a trivial thing. After all, there doesn’t seem to be much of a difference between a standard hyperlink, and a button. Well, in actuality, having a button instead of plain text can yield surprising results. This is mostly due to how human attention works, and how notable your buttons are.

How people usually experience header navigation menu

The header navigation menu is usually the second thing that people notice. If you’ve designed your website well and added the navigation menu properly, the title of your post should be the first thing that catches the viewer’s eyes. But, after that, their gaze should naturally head to the navigation menu in order to see what is available. If they decide to stay on the current page, so be it. But, if there are other points of interest on your website, they should be clearly visible in the header navigation menu.

A girl navigating a website along with her grandfather.
You should always try to make your website intuitive and easy to navigate.

After all, your goal should be to keep people for as long as possible on your website. And having an easy-to-understand menu can be of great help. So, where do buttons come in all of this?

The benefit of adding a button

The main idea of adding a button is to emphasize something important. While the header menu does contain interesting links, not all of them are of the same importance. Some are simple navigation tools to help with reading. And others are more direct promotional content, that serves to guide your readers to conversion. Well, when it comes to the latter content, buttons should be your go-to choice. As you can alter them any way you see fit, they will naturally stand out and draw attention. So, if you understand your customer’s journey through your website, you can easily use buttons to draw them to social media, or to a successful conversion.

Variouis social media buttons, showing what you need to keep in mind while adding a button in the header navigation menu.
It is not uncommon for people to use buttons in order to integrate their website with social media.

Customization tips

Customizing your buttons to have the proper effect can be a bit tricky. On the one hand, you don’t want them to stick out too much as they will ruin the look of the webpage. But, you also don’t want them to blend in too much as they won’t draw attention. So, what you need to find is the middle ground, which is easier said than done. Our advice is to look for websites that successfully use buttons in their header navigation menu and see how they utilize colors. Remember, you can change the shape, the outline, the font, and the color of your button. So, use this variety in customization to your advantage. Ideally, you will find the style that goes well with the overall aesthetic of your website. While also drawing attention.

How to add a button in the header navigation menu

Fortunately, adding a button in the WordPress header navigation menu is surprisingly straightforward. Firstly, you need to head to the navigation menu and add the link that you want to convert into a button. You can do this on the Appearance -> Menu page. Once you’ve done that, click on the Screen Options button near the top. By doing so you will get a fly-down menu with a couple of options. For this case, you only need to check the ‘CSS Classes’ option.

Once you have gone through this, scroll down and click on the expand the menu item that you want to convert into a button. There you will get a new CSS class option in the item settings. In it, you can enter the class name. Theoretically, you can name your class any way you see fit. But, for this article, we will give the class name “menu-button” for easier understanding. Once you’ve entered your name remember to click on the ‘Save Menu’ button.

Adding CSS code

After adding our custom CSS class, we can proceed to add the CSS code. Here you need to go to Appearance -> Customize and launch the WordPress theme customizer. By doing so you will get a preview of your website, and a list of theme settings. What you need to do is to click on the Additional CSS tab and expand it. Here you will get a box where you can add your custom CSS code. For starters, we suggest that you simply paste the following code:

.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;
}

Once you add the CSS code, the theme customizer will apply it to your website preview. This will allow you to see the changes that you’ve made. And don’t worry, the changes aren’t permanent. If you feel the need, go ahead and experiment with CSS and see what you can do. In order to save your changes, click on the Publish button.

A laptop with CSS programming on it.
Try learning a bit of CSS before adding to the header navigation menu. It will do you a world of good.

And with this, you’re finished adding a button in the header navigation menu.

Final thoughts

All things considered, buttons can be a great addon to your header menu. But, it is paramount that you find the right design. In fact, one of the main reasons why people avoid adding a button is that they simply can’t fit the button with the website design. If you get stuck, we strongly suggest that you consult with a professional graphic designer and value their input. As you can see, it really doesn’t take much to add a button, once you have the design figured out.

Newsletter