Docs

[Command23]

I would like to add a CTA rectangle button to my navbar. I have tried the my-btn-pill code in the custom menu item section and used the some provided code that i seen in a previous thread..

Under Appearance > Customize > CSS

.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;
}

I was able to get the pill button to show up but I am NOT able to make any changes beyond that point. The only changes I would like to make is change the color of the buttons and ensure it aligns to my navbar menu. NOT a big deal but if possible, I would rather have a rectangle button rather than the pill button.

Thank you

[Command23]

This reply has been marked as private.

[Rahul]

Hi There,

Thanks for writing in!

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Command23]

This reply has been marked as private.

[Christopher]

Hi there,

Provided credentials didn’t work, please check.

Thanks.

[Command23]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the information. To make any of the changes you want for the pill button, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav>li.my-btn-pill {
    margin-top: 30px;
}

.x-navbar .desktop .x-nav>li.my-btn-pill a{
    border-color: red;
    color: red !important;
}

Feel free to change the colors and add your other styling.

Please let us know how it goes.

[Command23]

That worked thank you but only on the home page. I am not able to make any changes to the button on any other page.

How would I change the following:

Change the pill button to a square one.
Change the color and hover color when in mobile view.

Currently, the code you provided only works when in desktop mode.

Here is my most recent code:

body.x-navbar .desktop .x-nav>li.my-btn-pill {
margin-top: 20px;
}

body .x-navbar .desktop .x-nav>li.my-btn-pill a{
border-color: #fff;
color: #fff !important;
}
body .x-navbar .desktop .x-nav>li.my-btn-pill a:hover{
border-color: #fff;
color: #fff !important;
background: #265F99;

Thank you.

[Rue Nel]

Hello There,

Thanks for updating in! You may have inserted the wrong code. Please check this out:

Please make sure that there are no conflicting codes. I can see that you have added the code in Cornerstone’s Custom CSS and there is also in the customizer’s custom css. If you want to apply the code in all of your pages, please put the code in the customizer and not just in Cornerstone’s custom css because this section will only applies to that page.

Hope this helps.

[Command23]

Thank you for your assistance. I would still like to change the button style from pill to square.

How do I go about doing that?

[Rue Nel]

Hello There,

Thanks for writing in! To change the button style from pill to a square, please update your code and make use this code instead:

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

    border-radius: 0 !important;
}

Hope this helps. Kindly let us know.

[Command23]

That worked.

Thank you!

[Paul R]

You’re welcome! 🙂

[Author]

Posts