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
.navbar .nav li.free_download.btn {
position: relative; bottom: 10px;
padding: 2px; line-height: 19px;
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;
}
25 thoughts on “Adding a button to the menu”
Thanks Sunita 🙂
Hi Nicholas
I foolowed this tutorial for my clients website how to remove the extra spce and centralise the text
https://uploads.disquscdn.com/images/15e0bd885b3950badccaca3f14fbcca2cb975d1f6bb1d77b389f69419cee25d6.png
Warm regards
Sunita
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;
}
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
Hi Viji,
Did you do step 1 – Add css classes? Use this link to do it.
http://presscustomizr.com/snippet/adding-css-classes-wordpress-menu/
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).
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.
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.
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
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.
how to add author photo in customizer theme
Hi Shamsher, can you please open a new topic in the general Customizer theme support forum ?
We’ll do our best to help and it will benefit to everyone!
Thanks,
Nicolas.
Hello And I did not get the click, although all did as written here … No change everything remains. Where there may be a solution?
website is http://www.littlereddings.org.uk
Thanks
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
can u tell us the solution Jon
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
Removing the classes did the trick.
Hi Justin, thanks for the update.
If you want to contribute, you are welcome to do it in the user’s forum here of course : http://wordpress.org/support/theme/customizr
Best whishes,
Nicolas.
Loving this theme Nikeo! FYI, need to add another CSS rule so that the first letter in the button displays correctly as follows:
.navbar .nav li.get_quote.btn a:first-letter { color: #FFF; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.31); }Thank you!
Thanks for sharing this contribution Ron!
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!
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.
Hey Jon, see here: http://www.w3schools.com/css/css_positioning.asp
Great great website. Excellent.