Center Logo On Mobile View Only

Hello:

I would like to have my logo centered only in mobile view. I have an "aftermarket" mobile menu under neath the headernav and it's just to empty with the logo to the left. Here is a picture of what I have now:

Screen Shot 2015-03-06 at 12.39.21 AM copy.png

So I would like the logo which reads "KV Store" to be completely centered here.

Thanks to all in advance,

Michael K.

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

I sent you a private message containing the url. Thank you for your help.

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

@media only screen and (max-width:840px) {
#gkLogo {
    left: 50%;
    margin: 0 0 0 -50px;
    position: relative;
}
}


Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

@media only screen and (max-width:840px) {
#gkLogo {
    left: 50%;
    margin: 0 0 0 -50px;
    position: relative;
}
}


Thank you for all of your help. However, after putting in the above code, it is not centered on screens smaller than 840px.

Hi

That's odd. Works for me. But I've just noticed that for screens smaller than 600px it gets overwritten with mobile.css script, so use this code:

Code: Select all

@media only screen and (max-width:840px) {
#gkHeader #gkLogo {
    left: 50%;
    margin: 0 0 0 -50px !important;
    position: relative;
}


Hi

That's odd. Works for me. But I've just noticed that for screens smaller than 600px it gets overwritten with mobile.css script, so use this code:

Code: Select all

@media only screen and (max-width:840px) {
#gkHeader #gkLogo {
    left: 50%;
    margin: 0 0 0 -50px !important;
    position: relative;
}


Thank you so much! I got it to work!