Adding a button to the menu


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. 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 : http://demo.presscustomizr.com

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


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



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

            Menaka,

            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

    jack

  • Pablo

    Hello. I used the code that you describe in the post and I made a nav menu like the one here: http://bc-plusapp.com

    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?

    Thanks,

    Jon

  • 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.

    Question:
    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.