How to Add a Button in Your WordPress Header Menu – Website Tips

Curated by WorkingFromHome

This article is an excerpt from the original article found in the Read More link – please follow for full article.

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

Adding a button in the header navigation menu lets you create a more noticeable call to action. It can get more clicks to your most important pages and create a better user experience by helping your visitors take action.

In this article, we’ll show you how to easily add a button to your WordPress header menu.

Why Add a Button in WordPress Header Menu?

WordPress navigation menus are usually plain text links that all look the same. In terms of design, all the links are given the same importance and weight.

What if you wanted to add a link to an online order form, a login or sign up page link, or a buy now link? These important calls to action will look just like the rest of the links in the header menu.

Changing important links in your WordPress navigation menu into buttons will make them more noticeable. This helps users easily find them, improving their engagement and experience on your website.

By default, WordPress has options to add buttons in WordPress posts and pages using the Buttons block. However, it does not have a built-in option to add buttons in navigation menus.

Luckily, there is an easy hack to convert any link in your WordPress navigation menu into a button.

That being said, let’s take a look at how to add a button in your WordPress header menu without installing a plugin.

Adding a Button in Your WordPress Header Menu

First, you need to add the link that you want to convert into a button into your WordPress navigation menu.

Simply go to the Appearance » Menus page in your WordPress dashboard and add the link to your navigation menu.

After that, you need to click on the Screen Options button at the top. This will reveal a fly down menu with a bunch of options. You need to check the box next to the ‘CSS Classes’ option.

Now, scroll down to your menu and click to expand the menu item that you want to convert into a button.

You’ll notice a new CSS class option in the menu item settings. Here, you need to enter a class name. You can call this CSS class any unique name you want, but for the sake of this tutorial we’ll call it menu-button.

After entering a name, click on the ‘Save Menu’ button to store your changes.

Now that we have added our own custom CSS class to the menu item, we can design it by adding our own custom CSS code.

Simply go to Appearance » Customize to launch the WordPress theme customizer.

You’ll now see a live preview of your website 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 where you can add your custom CSS code.

Here, you can copy and paste the following CSS code 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;  }  

As soon as you add the CSS code, the theme customizer will auto

For the Full Article
Please Continue Reading Here: How to Add a Button in Your WordPress Header Menu

Commentary:
Quite useful news and links can be seen on this complete post.
source – WPBeginner.com

You May Also Like…

How to Set Up a Site Like Teachers Pay Teachers with WordPress – Website Tips

How to Set Up a Site Like Teachers Pay Teachers with WordPress – Website Tips

Do you want to set up a website like Teachers Pay Teachers using WordPress? Teachers Pay Teachers is an online marketplace for educators where they can sell educational resources to other teachers. The platform makes money by selling memberships and taking a small fee on transactions. In this article, we’ll show you how to easily create a website like Teachers Pay Teachers in WordPress. Getting Started with Your Teachers Pay Teachers Like Website To make a Teachers Pay Teachers like website in WordPress, you’ll need a few things to get started. First, you’ll need a domain name (example: wpbeginner.com) and a web hosting account to store your website files. Normally, a domain name will cost you 16.99 per year and web hosting starts at $7.99 per month (paid annually). Now if you are just testing the waters, then this may sound a little expensive. Luckily, Bluehost has agreed to offer…

How to “Easily” Create Custom WooCommerce Thank You Pages – Website Tips

How to “Easily” Create Custom WooCommerce Thank You Pages – Website Tips

Do you want to easily create a custom WooCommerce thank you page? A custom thank you page for order confirmation is a great way to connect with your new customers and even get additional sales. In this article, we’ll show you how to create a custom WooCommerce thank you page, step by step. Why Customize a WooCommerce Thank You Page in WordPress? Creating a custom WooCommerce thank you page gives you a way to connect with your customers when they make a purchase. The order confirmation or thank you page may seem like a small part of your online store, but it can actually be a very valuable part of your sales process. The problem is that default WooCommerce thank you page isn’t really optimized for conversions. This is why smart business owners build a well-designed and high-converting thank you page to replace the default option. There are a lot…

Working From Home TV …

Tips to enhance your own website…

How to Set Up a Site Like Teachers Pay Teachers with WordPress – Website Tips

How to Set Up a Site Like Teachers Pay Teachers with WordPress – Website Tips

Do you want to set up a website like Teachers Pay Teachers using WordPress? Teachers Pay Teachers is an online marketplace for educators where they can sell educational resources to other teachers. The platform makes money by selling memberships and taking a small fee on transactions. In this article, we’ll show you how to easily create a website like Teachers Pay Teachers in WordPress. Getting Started with Your Teachers Pay Teachers Like Website To make a Teachers Pay Teachers like website in WordPress, you’ll need a few things to get started. First, you’ll need a domain name (example: wpbeginner.com) and a web hosting account to store your website files. Normally, a domain name will cost you 16.99 per year and web hosting starts at $7.99 per month (paid annually). Now if you are just testing the waters, then this may sound a little expensive. Luckily, Bluehost has agreed to offer…

How to “Easily” Create Custom WooCommerce Thank You Pages – Website Tips

How to “Easily” Create Custom WooCommerce Thank You Pages – Website Tips

Do you want to easily create a custom WooCommerce thank you page? A custom thank you page for order confirmation is a great way to connect with your new customers and even get additional sales. In this article, we’ll show you how to create a custom WooCommerce thank you page, step by step. Why Customize a WooCommerce Thank You Page in WordPress? Creating a custom WooCommerce thank you page gives you a way to connect with your customers when they make a purchase. The order confirmation or thank you page may seem like a small part of your online store, but it can actually be a very valuable part of your sales process. The problem is that default WooCommerce thank you page isn’t really optimized for conversions. This is why smart business owners build a well-designed and high-converting thank you page to replace the default option. There are a lot…

How to Connect Microsoft Outlook to WordPress (Step by Step) – Website Tips

How to Connect Microsoft Outlook to WordPress (Step by Step) – Website Tips

Are you looking for a way to use your Microsoft Outlook account to send emails from your WordPress website? Connecting Microsoft Outlook with WordPress helps improve email deliverability by making sure that your emails reach your subscriber’s inbox, even if you’re sending a lot of them. In this article, we’ll show you step by step how to connect Microsoft Outlook to WordPress. Why Use Microsoft Outlook to Send WordPress Emails? Using Microsoft Outlook is a great option for business owners who regularly use Office 365. You can use your existing account to send emails to your subscribers from your WordPress website. The best part about using Outlook is that it allows you to send a lot of emails at once. You can send up to 10,000 emails per minute, which is a much higher limit than other mailing services. If you have a busy online store, then this will help…

0 Comments

Submit a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.