Logo gets cut off from the top on the mobile devices

Hello,
I need help fixing the logo getting cut off from the top in the responsive mode on small screens such as the smart phones. The logo works great on the desk top but I need help to make it responsive so the header area does not look all bunched up.
Here is the URL of the site, "http://192.185.154.195/~global/".
Thank you for your prompt reply!
Kindest regards,
Saeed

You are having quite big logo. Even if I'll fix it position it just doesn't fit nice in header. You would need to redesign entire header to make it look good. Please take a look into the screenshot:

Screen Shot 2014-11-04 at 11.41.40.png

Hi Cyberek,
Thank you for your prompt reply!
I am a member of other premium template clubs also and they are very cooperative in providing help with any customization requests. Especially, but not limited to, when there is this issue of a logo not being responsive, I cannot tell my client to make their large logo into a tiny illegible one so that we can fit it into the tiny space that has been allowed by the designer.
The problem here is that the logo image should resize automatically when seen on smaller screens but that is not happening and that is exactly what is wrong with it. So, kindly tell me how we can make the logo image Responsive so that it automatically resizes when the website is viewed on smaller sized screens.
Thank you for your understanding and cooperation!
Kindest regards,
Saeed

As I have said - I can try to help you if you provide how it should look on small screens.
With current setup you need to place a lot of elements there - logo, mobile menu, user menu, search box and cart which is a big overload for mobile screens.

Hi,
Yes, you are right, the header should not be overloaded in the mobile view. Please take a look at the attached screen shot which illustrates how the end result of the editing should appear. I believe by removing the top navigation and search field, the mobile view will look much better.
Thank you for your prompt reply!
Kindest regards,
Saeed

Please edit: /templates/gk_storebox/css/override.css and add at its end:

Code: Select all


@media (max-width: 620px) {
    #gkTopMenu {
        display: none;
    }
}
@media (max-width: 580px) {
    #gkLogo {
        display: inline;
    }
    #gkLogo img {
        margin: 0px !important;
        max-width: 70%;
}
    #gkSearch {
        display: none;
    }
}


Remember to enable "CSS override" in template settings - advanced section.

I hope this will fit into your taste.