Docs

[JW & Co.]

Good morning,

If you take a look at the home page for homeandhealthy.joshuaweatherstone.com, you will see a “Schedule A Visit” button. Can you tell me how to create a second button just like this but slightly smaller to replace the phone number in the top right of the header?

Thanks,
Josh

[Thai]

Hi Josh,

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

p.topbar-contact a {
    color: #ffffff;
    border-color: #d25d2c;
    background-color: #d25d2c;
    -webkit-box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
    box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0, 0, 0, 0.75);
    padding: 4px 8px;
    font-size: 14px;
    display: block;
    float: right;
}

Hope it helps 🙂

[JW & Co.]

Hello,

This looks great, but how can I apply the hover effect to operate the same as the other 3D buttons?

Thanks,
Josh

[Thai]

Hi Josh,

Please also add this CSS:

p.topbar-contact a:hover {
    border-color: #056282;
    background-color: #056282;
    -webkit-box-shadow: 0 0.25em 0 0 #034E68, 0 4px 9px rgba(0, 0, 0, 0.75);
    box-shadow: 0 0.25em 0 0 #034E68, 0 4px 9px rgba(0, 0, 0, 0.75);
}

Hope it helps 🙂

[JW & Co.]

Is there a way to apply the button effects to every page other than the home page? I want to keep the phone number on the home page, and have the button on all the other pages.

Thanks,
Josh

[Rupok]

Hi Josh,

If you add this under Custom > CSS in the Customizer then it should be applied to all pages.

Thanks!

[JW & Co.]

Please read my reply again more closely.

I want the button on every page EXCEPT the home page. The home page should have a phone number in that spot.

Thanks,
Josh

[Friech]

Hi Josh,

In that case you need to place both the number and button on the topbar.

<p class="topbar-contact"><a href="/contact/">Schedule A Visit</a></p>
<p class="topbar-tel"><a href="tel:5525555">552-5555</a></p>

Then hide the button and show the number on mobile with this custom CSS

@media (max-width:  979px) {
	.topbar-contact {display: none;}
}
@media (min-width:  978px) {
	.topbar-tel {display: none;}
}

Hope it helps, Cheers!

[JW & Co.]

Hello,

Let me try to explain again what I want.

1. On the home page I want a phone number in the top right where there is currently a button.
2. On every other page I do not want a phone number. I want the button to remain as it currently looks on the home page.

So ONLY the home page is different from the others.

[Joao]

Hi There,

Add the code as reccomended above and than add the following code to Appereance Customizer Custom CSS in order to hide the phone number on other pages but show on home page

.topbar-tel {display: none;}
.home .topbar-tel {display: block !important;}

Hope it helps

Joao

[JW & Co.]

Hello,

It is almost there but still needs a little work. I don’t know how to explain myself differently:

1. The home page should not show phone number at top, only the button on the right.
2. Every other page on the website should show the phone number INSTEAD of the button. The phone number should be located in the same place that the button is currently located.

[Joao]

Hi There,

Please update the code I provided to this instead:

.topbar-tel {
display: none;
float: right;
}

.home .topbar-tel {
display: block !important;
}

.home p.topbar-contact {
display: none !important;
}

p.topbar-contact {
display: block !important;
}

Hope it helps

Joao

[JW & Co.]

Joao,

Thank you so much for your help. I know that I can always count on you to sort the code out correctly; unfortunately, I can’t say the same for all of the support staff. Please know that your attention to detail and thoroughness the first time is recognized and appreciated.

Josh

[Rad]

You’re welcome, Josh! Will forward it to Joao 🙂

[Author]

Posts