Add button to Header – Themeco Community

Add button to Header

Brianne H — Mon, 04 May 2015 19:05:24 +0000

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!

Reply To: Add button to Header

Friech — Mon, 04 May 2015 23:30:11 +0000

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!

Reply To: Add button to Header

Brianne H — Wed, 06 May 2015 16:54:15 +0000

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?

Reply To: Add button to Header

Brianne H — Wed, 06 May 2015 18:04:29 +0000

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!

Reply To: Add button to Header

Darshana — Wed, 06 May 2015 22:08:35 +0000

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.

Reply To: Add button to Header

Brianne H — Thu, 07 May 2015 18:59:09 +0000

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.

Reply To: Add button to Header

Prasant Rai — Thu, 07 May 2015 22:50:06 +0000

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.

Reply To: Add button to Header

Brianne H — Wed, 13 May 2015 16:22:25 +0000

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

Reply To: Add button to Header

Nico — Wed, 13 May 2015 20:33:58 +0000

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.

Reply To: Add button to Header

Brianne H — Thu, 14 May 2015 19:59:43 +0000

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