Centering button in footer

[eutaw]

In the footer, I have a button (Schedule Appointment) that I want to come down so that it is more centered with the other text in the footer navigation, like it looks at the top of the page. How would I do this?

[mldarshana]

Hi There @eutaw

Thanks for writing in! Upon checking your site, I see that you have the following class assigned to your button my-btn-class which has -15px of top margin, so that your button is not properly aligned.

.x-btn.my-btn-class {
    color: #ffffff;
    border-color: #ec6434;
    background-color: #ec6434;
    position: relative;
    top: -15px;
}

You can assign a different class into your footer button element, for example my-btn-footer and add your CSS rule into your X -> Theme Options -> CSS area without that top margin.

.x-btn.my-btn-footer {
    color: #ffffff;
    border-color: #ec6434;
    background-color: #ec6434;
    position: relative;
    top: 0;
}

Hope that helps.

[eutaw]

I need top: -15px; so that the button is aligned properly on the navbar that’s at the top of the page. Where do I tell Xtheme to use my-btn-footer?

[friech]

Hi @eutaw,

Keep that class on the button, there is a way we can target that button on footer specifically, please add this to Theme Options > CSS

footer .x-btn.my-btn-class {
	top: 0;
}
footer.x-colophon.bottom .x-nav li:last-child:before {content: " ";}

Hope it helps,
Cheers!

[eutaw]

Thank you very much.

[Prasant]

You are most welcome.