Add Button in Navigation Menu of Generatepress theme using CSS (Easily)

In this Generatepress tutorial, I will show you how to add a call-to-action button in the navigation menu of the Generatepress theme.

Adding a button in the menu of the Generatepress theme is quite simple and you don’t require any additional plugins.

I know most of the premium themes provide this functionality by default and don’t require any coding for that but in Generatepress you don’t have this feature built-in. You have to do it manually by adding some CSS code.

Don’t worry this is not that technical and you can easily add a button in the menu by following this step-by-step guide given below.

Benefit of adding a button in Navigation Menu

Adding a button to the menu gives a professional look to your website and can help you increase the click-through rate of any link that you want to draw user attention to.

You can use a call to action button in the menu like Subscribe, Newsletter, Contact us, Latest deals, etc. It helps you generate more leads and sales.

video Guide to add Navigation Button

How to add button in the menu of Generatepress theme

To add a button in the navigation menu follow the below steps one by one.

Step-1: Go to WordPress dashboard > Appearance > Menus section.

Edit WordPress menu in Generatepress theme

Step-2: Here in the top-right menu, click on the “screen option” and turn on the CSS classesoption.

Turn on CSS class in the menu properties

Step-3: Now create a custom link and add a CSS class (menu-button) as shown in the below image.

Add CSS class for navigation menu
Create custom link and add the CSS class

Step-4: Now add the URL link and Button label and save the menu.

Step-5: Now Go to Appearance > Customize > Additional CSS section.

Step-6: Here Paste the CSS code and hit the publish button.

Copy CSS code

.main-navigation:not(.toggled) ul li.menu-button a {
	border-width: 1px;
	background: #00a87a;
	border:2px solid #00a87a;
	border-radius: 6px 6px 6px 6px;
	color: white;
	line-height: 40px;
}

Now your button is added to the menu of your WordPress website. Now you can further customize the button.

Customize Navigation button

Now to customize the Navigation Button you can tweak a little bit in the CSS code.

CSS code customization for menu button in generatepress
CSS code customization

Here in the background: #00a87a; you can change the button color by changing the hex code. You can add your brand color code to match the website design.

You can also change the border radius to make the button rectangular, circular and any other shapes.

Here in the color: white; section you can replace white with any color code and it will change the color of the text use in the button.

You can also add a hover effect to the navigation button by adding a CSS code below it.

.main-navigation:not(.toggled) ul li.menu-button a:hover {
  color: #ffffff !important;
  background-color: #196f8c;
}

Here you can change the hover color by changing the “hex code” in the above CSS code.

Note: You can get the hex code from the website called HTML Color Codes or use a color picker chrome extension.

In this way, you can easily add buttons to the navigation menu of your Generatepress theme and customize it to match the color scheme of your WordPress website.

Conclusion

I have shown you how to add a button in the navigation menu of the Generatepress theme. But you can use this code with other themes by changing the CSS class of the navigation menu (here main-navigation).

If you have any doubt regarding the button customization or any other WordPress customization, you can ask me in the comment section. Or, you can connect me on Twitter.

Read more WordPress tutorials Here. 👇

Hello there. I am Abhishek Padhi, an Indian digital entrepreneur. With a handful of years of practice and experiment, I currently share top-notch information related to Blogging, SEO, etc. If you want to start a blog easily and create a fortune out of it, then you will love key2Blogging. You can learn more on the about us page.

Leave a Comment

0 Shares
Copy link