Title: add button to menu
Last modified: October 15, 2020

---

# add button to menu

 *  [mako2](https://wordpress.org/support/users/mako2/)
 * (@mako2)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/add-button-to-menu/)
 * Hello,
 * How can I add a button to the main menu? Like this [https://snipboard.io/hqcKXH.jpg](https://snipboard.io/hqcKXH.jpg)
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fadd-button-to-menu%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
 * (@kharisblank)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/add-button-to-menu/#post-13541978)
 * 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](https://drive.google.com/file/d/18GgdR98_Ux42jANoziqSKLKlVUPY2c8Q/view?usp=sharing)
   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
 *  Thread Starter [mako2](https://wordpress.org/support/users/mako2/)
 * (@mako2)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/add-button-to-menu/#post-13564636)
 * Why is the button showing like this and not in the same row as the rest of the
   menu? [https://snipboard.io/wJgsm0.jpg](https://snipboard.io/wJgsm0.jpg)
 *  [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
 * (@kharisblank)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/add-button-to-menu/#post-13565526)
 * 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

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘add button to menu’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/airi/1.0.17/screenshot.png)
 * Airi
 * [Support Threads](https://wordpress.org/support/theme/airi/)
 * [Active Topics](https://wordpress.org/support/theme/airi/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/airi/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/airi/reviews/)

## Tags

 * [button](https://wordpress.org/support/topic-tag/button/)

 * 3 replies
 * 2 participants
 * Last reply from: [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
 * Last activity: [5 years, 7 months ago](https://wordpress.org/support/topic/add-button-to-menu/#post-13565526)
 * Status: not resolved