Docs

[JW & Co.]

Hello,

I am trying to make some edits to my website, http://www.homeandhealthy.joshuaweatherstone.com, and need some help.

Please tell me how to vertically center the text in the topbar, as well as how to align it to the right side of the page. I would also like to make that text bold, change the color, and add the phone icon before it.

Thanks so much!
Josh

[Friech]

Hi Josh,

Thanks for writing in! Please update your topbar content to this:

<p class="topbar-contact"><i class="x-icon x-icon-heart" data-x-icon="&#xf095;" ></i> (609)334-8933</p>

And add this to your custom css on customizer.

p.topbar-contact {
    margin-bottom: 0;
    color: red;
    font-size: 1.5em;
    font-weight: bold;
    text-align: right;
}

Feel free to adjust those values.

Hope it helps, Cheers!

[JW & Co.]

Unfortunately the custom css is not affecting the text in the topbar…

Thanks,
Josh

[Thai]

Hi Josh,

You forgot to close the curly bracket(}) in your custom CSS.

Please find this CSS:

.x-colophon.top .widget ul li {
  background-color: #056282; 
  
p.topbar-contact {
    margin-bottom: 0;
    color: red;
    font-size: 1.5em;
    font-weight: bold;
    text-align: right;
}

And replace to this:

.x-colophon.top .widget ul li {
	background-color: #056282; 
}
p.topbar-contact {
	margin-bottom: 0;
	color: red;
	font-size: 1.5em;
	font-weight: bold;
	text-align: right;
}

Hope it helps 🙂

[JW & Co.]

Working now! Thanks!

[Thai]

If you need anything else please let us know.

[Author]

Posts