Header Button in Pro Theme

Hi, Im trying to even out the space/ center the button of the last child in my header and cant seem to get it to work. I’ve inspect it from google and found what is causing it but don’t see that anywhere on my css. I’ve attached screenshots for reference. Website is test.serviceecho.com

Screen Shot 2021-07-30 at 7.38.14 AM

Regards

Hello Jason,

Thanks for writing to us.

It seems that the padding is not working properly. I would suggest you replace this code from the custom CSS code with the given below custom CSS code.

@media (min-width: 980px)
{
.x-navbar .x-nav>li:last-child a {
    border: px solid #d7801f;
    padding: 0.40em 0.40em 0.12em 1.2em;
    margin: 1em 0.3em 1em 0.3em;
    max-height: 34px;
    border-radius: 0.12em;
    box-shadow: none!important;
    box-sizing: border-box;
    background-color: #94d500;
}	
}

Replace with the given code

@media (min-width: 980px)
{
.x-navbar .x-nav>li:last-child a {
    display: inline-block;
    border: 0px solid #d7801f;
    padding: 0.5em 0.5em 0.5em 0.5em !important;
    margin: 1em 0.3em 0.3em 0;
    max-height: 34px;
    border-radius: 0.12em;
    box-shadow: none!important;
    box-sizing: border-box;
    background-color: #94d500;
    transition: all 0.2s;
}

}

Please feel free to change the padding value as per your design.

The purpose of providing custom CSS is 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

Thank you for your help!

Hope you have a great weekend

Hi Jason,

You’re welcome! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.