[Brianne HParticipant]

Hi there!

I would like to add a “Schedule Demo” button in the far right in my header, next to the RESOURCES menu item on my site at dev.brandwise.com . Is there a way to add the button shortcode as a header item?

Thanks for all the help!

[FriechModerator]

Hi There,

Thanks for writing in! Add the last menu item like a normal menu and then add this under Custom > CSS in the Customizer.

@media (min-width: 980px) {
    .x-navbar .x-nav>li:last-child a {
        border: 1px solid #fff;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        margin-top: 24px;
  		max-height: 34px;
        border-radius: 2px;
        box-shadow: none !important;
    }

}

This styling will always apply to the last item on the menu.

Hope it helps, Cheers!

[Brianne HParticipant]

thank you so much!!! Is can you please tell me how to style it as a solid color button, color being: #d7801f with the same white text?

[Brianne HParticipant]

sorry one more things, can you please tell me how to add more space between the button and the menu item? I would like to have the schedule demo button stand apart from the rest of the demo items, spacing-wise.

Thanks again!

[DarshanaModerator]

Hi there,

You can add margin to the provided code margin-left: 10px;.

So the whole code will look like:

.x-navbar .x-nav > li:last-child a {
    border: 1px solid #fff;
    border-radius: 2px;
    box-shadow: none !important;
    margin-left: 10px;
    margin-top: 24px;
    max-height: 34px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}

Hope that helps.

[Brianne HParticipant]

Hi thanks that did work! Can you please tell me how to fill in the box with color? I’d like to have a solid orange box with white text instead of just the outline.

[Prasant RaiModerator]

Hello Brianne,

Thanks for writing in!

Kindly add background-color: #DF8E19 CSS rule. So the final code will look like:

@media (min-width: 980px)
.x-navbar .x-nav>li:last-child a {
  border: 1px solid #d7801f;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  margin-left: 30px;
  margin-top: 24px;
  max-height: 34px;
  border-radius: 2px;
  box-shadow: none!important;
  background-color: #DF8E19;
}

Hope that helps.

Thanks.

[Brianne HParticipant]

Thanks you!!! One last thing, how do I make the font inside the button white? Again the button in the header on http://dev.brandwise.com

[NicoModerator]

Hi There,

You’re most welcome.

Try add this in your Customizer’s Custom CSS:

.menu-item-512 a{
color:#FFFFFF;
}

Hope it helps.

Thanks.

[Brianne HParticipant]

Sorry, I just entered that and it didn’t seem to work.

[FriechModerator]

Hi There,

Add the css code below instead:

.x-navbar .x-nav>li:last-child a span {color: #fff !important;}

Cheers!

[james wParticipant]

It didn’t work. Can you check?

[John EzraMember]

Hi there,

Thanks for updating the thread! That should have worked. Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[james wParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for providing the very detailed information. We want you to update the given code and use this instead:

@media (min-width: 980px) {
    #menu-item-512 a {
        background-color: #000;
        color: #fff !important;
        border: 1px solid #fff;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        margin-top: 24px;
  	max-height: 34px;
        border-radius: 2px;
        box-shadow: none !important;
    }
}

Feel free to change the colors of the button. The button may look like this in your site:

We would loved to know if this has work for you. Thank you.

[Author]

Posts