Docs

[powrider686]

Hello,
I’d like to put in two buttons on my headbar on my site wasteinc.us.

I’d like to have them on the right side, without any social icons. One of them should be a link to the Request Service page, like the menu currently has, and the second one would be to visit a sister website and business of theirs, moeinc.us.

So basically two buttons with two different links and styling would probably be the same but maybe slightly different.

Thanks for the help!

[powrider686]

This reply has been marked as private.

[Paul R]

Hi,

To achieve that, kindly do the following.

1. Add the code below in your child theme’s functions.php file.

add_filter('x_option_x_topbar_content', 'do_shortcode');

Please add it after this line

// Additional Functions
// =============================================================================

2. Add the button shortcode under Appearance > Customize > Header > MISCELLANEOUS > Topbar Content

EG.

[button type="real" shape="rounded" size="regular" href="http://wasteinc.us/get-in-touch/request-service/" title="Request Service"]Request Service[/button]

[button type="real" shape="rounded" size="regular" href="http://moeinc.us/" title="MOE INC"]MOE INC.[/button]

http://theme.co/x/demo/integrity/1/shortcodes/buttons/

3. Add this in Appearance > Customize > Custom > Edit Global CSS

.x-topbar .p-info {
    float: right;
}

Hope that helps.

[powrider686]

That did the trick, thank you!

Another question about those buttons. How could I use an image, like the sites logo – http://wasteinc.us/wp-content/uploads/sites/2/2016/05/WasteInc.LogoVector460x125.png – inside the button instead of the text?

I know it will need to be a smaller dimension image, but how could I make that work and what dimension would the .png image file need to be?

Thanks so much!

[Thai]

Hi There,

First please add the btn-bg to your button:

[button type="real" class="btn-bg" shape="rounded" size="regular" href="http://wasteinc.us/get-in-touch/request-service/" title="Request Service"]Request Service[/button]

[button type="real" class="btn-bg" shape="rounded" size="regular" href="http://moeinc.us/" title="MOE INC"]MOE INC.[/button]

After that add the following CSS:

.btn-bg {
    background: url(http://wasteinc.us/wp-content/uploads/sites/2/2016/05/WasteInc.LogoVector460x125.png) center center no-repeat;
    background-size: 100% 100%;
    text-indent: -99999px
}

Hope it helps 🙂

[Author]

Posts