Docs

[Simon T]

Hi guys,

Just wondering if I can add a standard button to the top right of the topbar to replace social icons? Just want a contact button that links to my contact page.

Thanks in advance!

[Christopher]

Hi there,

To hide social icons in topbar, please add following code in Customize -> Custom -> CSS :

.x-topbar .x-social-global{
display:none;
}

To add button, please insert this code in topbar content area :

<a class="x-btn real square mini" href="#example" title="Example">Square Button</a>

Hope that helps.

[Simon T]

Thanks it did, but how to I make the button display at the top right where the social Icons would normally be?

[Joao]

Hi Simon,

Please add the following code to Appereance Customizer Header > Topbar Content:

<a class="my-button" href="#">Donate</a>

And add the following code to Appereance Customizer Custom CSS

.x-topbar .x-social-global{
display:none;
}
.my-button{
background:red;
color:white;
display:inline-block;
padding:10px;
}
.my-button:hover{
background:blue;
color:white;
display:inline-block;
padding:10px;
}
.x-topbar .p-info {
  float: right;
}

Hope that helps,

Joao

[Simon T]

Thats great, but I also have topbar content at the top left so I just want the button to move to the top right, not all of the topbar content?

[Rue Nel]

Hello There,

Thanks for the updates! To assist you better with this issue, would you mind providing us the url of your site with login credentials, if necessary, so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password (only if necessary)

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

Thank you.

[Simon T]

This reply has been marked as private.

[Simon T]

Could you please also advise how to make the button a pill like the other buttons on my site? Thanks!!

[Lely]

Hi Simon,

Thank you for the credentials.
Please update this part:

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

To this:

.x-topbar .p-info {
    width: 100%;
}

Then also add this:

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

To make the button pill please update the button code to this:
<a class="my-button x-btn x-btn-pill">Make a booking</a>

Hope this helps.

[Author]

Posts