Add button to the menu

This is really confusing, Ive been able to do it by editing the source but that seems a little bit wrong, there must be a way just to add a class to a link… in the menu.
Can somebody please give me the answer, I’m sure its just a dumb solution xD

(ive gone through the 33 pages…)

The only thing I can think of is to add a page or link from Appearance > Menus, then change the navigation label to have a button tag (I did a similar thing with mine to have an image tag for my flag).

I know it might sound silly, but how do you edit the navigation label ? As far as I know, you can only edit the text and alt, you cannot change the class, can you ?

Hi,
You can add a class to a menu element.
1) Go to admin > appearance > menu
2) Click on Screen Options (top right of the screen)
3) Check the CSS classes options in the “Show advanced menu properties” panel
4) add your css classes to the element

Then you can easily style your menu element with the custom css option or in your style.css if using a child theme.

Example: the green button on the demo site : https://demo.themesandco.com

1) I added this classes to my element in the 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;
}

Thank you so much !

On the top of having an awesome theme, you also provide a great user support.

Thank you again !!!!

Bastien

You are welcome!

Ho and one last thing while you’re around, is it normal I cannot get some bootstrap features like the alert classes into the side text widgets ? It’s weird that bootstrap features only work in specific areas of the theme… Is this something that can be sorted out easily ?

When you get Bootstrap 2.3.2, you can select what you do/do not include. I noticed when going through the 3.0.8 CSS that the alert-class code is not in Customizr. This is what was left out:

/*--------------------- ALERT NOT IN ORANGE
.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.alert,
.alert h4 {
  color: #c09853;
}
.alert h4 {
  margin: 0;
}
.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 20px;
}
.alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #468847;
}
.alert-success h4 {
  color: #468847;
}
.alert-danger,
.alert-error {
  background-color: #f2dede;
  border-color: #eed3d7;
  color: #b94a48;
}
.alert-danger h4,
.alert-error h4 {
  color: #b94a48;
}
.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #3a87ad;
}
.alert-info h4 {
  color: #3a87ad;
}
.alert-block {
  padding-top: 14px;
  padding-bottom: 14px;
}
.alert-block > p,
.alert-block > ul {
  margin-bottom: 0;
}
.alert-block p + p {
  margin-top: 5px;
}
--------------------- END ALERT NOT IN ORANGE */

N.B. This was for Customizr 3.0.8. Thinkgs may have changed in 3.0.9.

It could be that you simply paste this CSS into your own child CSS and it will work. But I suspect that if the Bootstrap tool was told to leave it out, then there may be some backend stuff missing too—in which case, it won’t.

Try it and let us know.

Ill give it a try when Ill get abck ho tonight.
Cheers !