Button Top Bar

[joserodrigz]

Hi there,
How can I create a button on the Topbar with colors (blue), text and linked to a site?

Tks in advance!
J

[prakash_s]

Hello @joserodrigz,

Thanks for writing to us.

In case if you are using a Pro theme and using a custom header then you can add the button element and linked to your site.

In case if you are using X theme you can go to X—>Theme Option —>Header—>Topbar
Add Custom HTML as shown in the screenshot and then style it as per your design.

I have added a custom class called “custom-button” in the anchor.
<a class="custom-button" href="#">Custom Text</a>

Please feel free to change the text of the anchor. Now you can add this style under X—>theme option -->CSS

a.custom-button {
background: #3f51b5 !important;
color: #ffffff !important;
padding: 6px 10px !important;
font-size: 16px !important;
}

Please feel free to change the background colour and font colour as per your design.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[joserodrigz]

Tks, working!
Now I need the code to move the button to the right, and also how to linked to a webpage when click…

(Is possible to align the button with the logo when Fixed Top + Stacked? I mean to the right of the logo?)

Tks in advance

[marc_a]

Hi @joserodrigz,

To move the button to the right, just add float: right; to the CSS. On the other hand, to add the button on the sticky header when using X theme will require customization. Regretfully, customization is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

If you don’t want customization, I suggest that you convert your X to Pro because there’s an option in the header builder to add the button in the sticky header. Please check this article on how you can convert X to Pro.

• https://theme.co/docs/converting-from-x-to-pro

Hope that helps.

Thank you.

[joserodrigz]

Ah, ok, when I bought X Theme was a different conditions… now the reply is to convert to Pro or buying another pack One… good!

[marc_a]

Hi @joserodrigz,

As I have mentioned on my previous response that it will require some customization to add a button in the sticky header. I am just suggesting that this features is available in Pro and it will save you from hiring any 3rd party developer to do it.

Thank you for understanding.