add button to menu

Hello there,

Thank you for reaching out to us and asking a question about our theme Airi. I am happy to help out.

First off, edit your current active primary menu from Appearance > Menus to add a a new menu item that will be used as a button.

Add a custom class name to CSS Classes of the menu settings, for example: menu-button

If the CSS Classes doesn’t appear by default, you should enable it from the Screen Options that is located at the top right side.

Here is the screenshot for your visual guide.

Save menu.

Then you can style the menu with CSS code to add background color and some paddings, so it will look like a button. For example:

.menu-button > a {
  background-color: #fff000;
  color: #ff0000 !important;
  padding: 5px 12px;
}

.menu-button > a:hover {
  background-color: #ff0000;
  color: #fff000 !important;
}

Add the CSS code to your site’s Additional CSS under Appearance menu > Customize.

I hope this reply helps. Feel free to raise new topics for your other questions.

Regards,
Kharis

Why is the button showing like this and not in the same row as the rest of the menu? https://snipboard.io/wJgsm0.jpg

Hello there,

Try adding the below CSS code to reduce the padding on each menu item.

#site-navigation.main-navigation li {
  padding: 0 5px;
}

Regards,
Kharis