Create a button on header

[seanlincoln]

Hello,
I have followed this thread to create a button on my header: https://theme.co/apex/forums/topic/add-button-to-header-2/

which works quite well, however when i view the header in mobile, the button messes up.

can anyone suggest how to fix this issue?

http://seanlincoln.com/astra/

[john]

Hey,

Thank you for writing in!

I`ve checked your site and you can make some adjusts on the button using the following custom CSS code:

@media screen and (max-width: 480px) {
     .x-navbar .x-nav>li:last-child a {
        padding-left: 37px !important;
        padding-top: 7px !important;
    }
}

[seanlincoln]

Hello,
Thanks for the response

i have tried what you have given me but it doesn’t work for different screen sizes,
is it possible to have the text centered in that box at any page width?

sean

[ruenel]

Hi Sean,

Thanks for updating in! Do you want the button to look like this on smaller screens?

If that is the case, please add the following CSS code after the other custom css that you already have

@media(max-width: 979px){
    .x-navbar .x-nav>li:last-child a {
        margin: 15px auto;
        max-height: 45px;
        text-align: center;
    }
}

Hope this helps. Kindly let us know.