Docs

[NickGuide]

Hello,

I would like to add a Transparent button to my Top Bar and to keep the colour the same as the navigation links. I would like to place it next to my social icons, just on the left of them.

I assume shortcodes don’t work in the Top bar, can you help with the required code??

Many Thanks

[NickGuide]

This reply has been marked as private.

[Darshana]

Hi there,

Thanks for writing in! You can add the following HTML code into your Customizer -> Header -> Topbar Content.

<a title="Example" href="#example" class="x-btn x-btn-yellow-transparent x-btn-transparent x-btn-square x-btn-regular">Square Button</a>

If you require further changes, please refer (https://community.theme.co/kb/implementing-additional-button-colors/).

Hope that helps.

[NickGuide]

Thanks for the help.
Can you help with the following

1) Center the botton in the Top bar
2) Change the colour during hovering
3) Move the button over to the right

Thank you

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.x-topbar .x-btn{

float:right;

}
.x-topbar .x-btn:over{
background-color:red;
color:#fff;

}

Hope that helps.

[NickGuide]

Thanks – doesn’t make any change at all though..

[Christopher]

Hi there,

Please add button to topbar so we can help you with this.

Thanks.

[NickGuide]

Thanks – I have added the button

[Darshana]

This reply has been marked as private.

[NickGuide]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-topbar .p-info a.x-btn.x-btn-yellow-transparent {
    border: 4px solid #ffbf00;
    margin-bottom: 5px;
}
.x-topbar .p-info a.x-btn.x-btn-yellow-transparent:hover {
    color: #fff;
    border-color: #fff;
}

Hope it helps 🙂

[NickGuide]

Yes this works perfectly thank you!
Could you please just help me shift it over to the right hand side.

Thanks again

[Christopher]

Hi there,

Please add this :

p.p-info {
    width: 88%;
}

And update this code :

.x-topbar .p-info a.x-btn.x-btn-yellow-transparent {
    border: 4px solid #ffbf00;
    margin-bottom: 5px;
}

To :

.x-topbar .p-info a.x-btn.x-btn-yellow-transparent {
    border: 2px solid #ffbf00;
    margin-bottom: 5px;
    float: right;
}

Hope it helps.

[NickGuide]

It works perfectly once i am customizing it however once i save it and view the page out of the editior it goes back to the left side..

[Thai]

Glad it worked 🙂

If you need anything else please let us know.

[Author]

Posts