Adding a button to the menu

Note :This snippet works only with the Classical style option. More about the theme style option here

Howdy developer, here is a quick snippet to add a button to the Customizr theme menu.

Example: the green button on the demo site :

1) I added this classes to my element in the menu (See this snippet to add classes to your WordPress Menu)

free_download btn btn-mini btn-primary

2) Then I wrote this in the custom CSS option of the Customizer



Related Snippets you may also like

25 thoughts on “Adding a button to the menu

  • Natália Rodrigues Pereira

    Hey jon, if you want to set the position of a menu button, try adding “margin-left: 10px;” in the code above. Like:

    .navbar .nav li.free_download.btn {
    position: relative; bottom: 10px;
    padding: 2px; line-height: 19px; margin-left: 10px
    vertical-align: middle;
    .navbar .nav li.free_download.btn a {
    color: #FFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.31)
    padding: 3px 13px;

  • Viji

    Hello Nicolas, Thank you first of all for this great theme and the support. I’m a newbie to website development at all but well experienced IT professional.

    I would like to add a couple of buttons and links above the “Main Menu” in the header(where tag line would appear, I don’t need a tag line). So, I used the css class you have given here for my new button(created Custom Link), but it added it as a link and not a button. How do I add a button instead. Any help in this regard is greatly appreciated. Thanks

      • Viji

        Thanks for responding and trying to help Menaka.
        Yes, I did follow all the steps mentioned in the given posts. I do see the Hyperlink for the text but not a button. Check out the screen shots I attached.
        Only difference I see while creating the Menu is that I have “Custom link” and not “Custom” (refer my first screenshot while creating the menu).

        • Menaka S

          Hi Viji,
          You have mixed the two steps.
          In CSS classes input box, please enter this.

          From the customizer, go to Advanced Options -> Custom CSS and enter this.

          • Viji


            Thank you so much, I got it now. I didn’t quite get the naming conventions in the beginning and got confused. Thanks so much.

  • Jack

    I made u button in my childtheme.
    But the text in the button is not in the middle.
    In the css there is vertical – align: middle:

    can you help me


  • Pablo

    Hello. I used the code that you describe in the post and I made a nav menu like the one here:

    I would like the menu to display in only 1 line and the buttons to be thinner, like your “post comment” button below.

    How can I do this??

    Thanks for the insight.

  • Ксения

    Hello And I did not get the click, although all did as written here … No change everything remains. Where there may be a solution?

  • Jon

    Hi Guys,

    I want to be able to align my last menu item which is a button called ‘Contact Us’ to the far right of the page. So far I have managed to make the menu item into a button and am able to target it using

    #menu-item-78.btn {
    left: 600px;
    position: relative;
    top: -10px;

    This will move it to the right but becomes hidden when the page is re sized.

    Is there a way to make the last menu item fixed to the far right – in line with the site description?



  • Justin

    Hey there. I tried this snippet and I am using a child theme. I added the code through the editor and did not like the way it resulted so I then removed it. My issue is that on all browsers, even though the code has been removed, it is still displaying as buttons, not text.

    Great theme and I am learning a ton from all of the wonderful people posting. I can’t wait to be helpful to others soon!

    ttyl. J

  • Ron Herren

    Loving this theme Nikeo! FYI, need to add another CSS rule so that the first letter in the button displays correctly as follows:

    Thank you!

  • Lauri

    First of all, thank you for this great theme. Secondly, the code snippets archive is super useful. It has solved many of my customization needs.

    I have succesfully applied css classes to menu items and removed the tagline from the top-right corner.

    Regarding this particular snippet, how could I place a couple of buttons to the top-right corner? I mean the same way you have Showcase and View demo buttons on this site currently.

    Thanks again for making customizr so great!

  • Jon

    How do I adjust the spacing between my other menu items and my button? I want to be able to place two buttons to the far right of the header, So far I have one working but it is stuck right next to my other navbar links.

Comments are closed.