Docs

[RichWarner89]

Hello! I want to add a button to my nav bar that looks like this one in the top right (screenshot).
Except for my specific colors of course.

[RichWarner89]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! Please navigate to Appearance > Menus and add your menu item that you want to look a button. Add a class x-btn on it.

If you dont see that class field on your end, please toggle the (1) Screen Options on the upper right. And check the (2) CSS classes

After that, let us know how do you want the button to look like so we can provide the tailored css.

Cheers!

[RichWarner89]

thank you!
I would like the button to be like this (screenshot), but “pill” shaped.

I would like the text and border color to be #1f79cf

then upon hover the button background to fill and be #1f79cf with the text #fff

[Friech]

Hi There,

I don’t see any of the menu item has a class x-btn? Did you add it? Since you want it as pill shape add this class as well x-btn-pill. After you added that class, you should see your menu having the pill shape border like a button. And we will just style it like the way you want.

Thanks.

[RichWarner89]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back! You can add this under Custom > CSS in the Customizer.

.x-navbar .menu-item.my-btn-pill a {
  border: 1px solid #1abc9c;
  border-radius: 20px;
  height: 40px !important;
  margin: 5px auto;
  padding: 10px 15px !important;
}
.x-navbar .menu-item.my-btn-pill a span {
  box-shadow: none!important;
}

Hope this helps.

Cheers!

[RichWarner89]

Close! I would like the text to be #1abc9c also.

Then I just need the adjustments for hover. I would like the button background to switch to #1abc9c and the text to switch to white #fff.

[Rupok]

Hi there,

Thanks for writing back. You should be able to adjust the code with the suggested code. However here goes the complete code for your convenience :

.x-navbar .menu-item.my-btn-pill a {
  border: 2px solid #1abc9c;
  border-radius: 20px;
  color: #1abc9c !important;
  height: 40px !important;
  margin: 5px auto;
  padding: 10px 15px !important;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.x-navbar .menu-item.my-btn-pill a:hover {
  background-color: #1abc9c;
  color: #fff !important;
}

Cheers!

[RichWarner89]

That worked great! You guys rock!

One last thing, is there an extra line of code to remove the blue underline when on hover?

[Jade]

Hi there,

Please add this code:

.my-btn-pill a:hover span {
    box-shadow: none !important;
}

Hope this helps.

[Jade]

Hi there,

Please add this code:

.my-btn-pill a:hover span {
    box-shadow: none !important;
}

Hope this helps.

[RichWarner89]

Perfect! You guys rock!

[Friech]

We’re delighted to assist you with this.

Cheers!

[Command23]

I am attempting to create the same effect but the code is not responding correctly as Im sure I am going wrong somewhere. I would like to add a rectangle button to the navbar. Can you please assist.

[Author]

Posts