Logo problems

I have a small png logo for my website uploaded. On the main site / desktop it looks good under (sent via PM) but not when you scroll down and the logo moves to the left - on mobile and tablet it does not fit.
How can I easily fix it?

Hi,

Try to add the following code into the theme’s css/override.css file or use any custom css plugin:

Code: Select all

@media (max-width: 640px) {
   #gk-logo {
      margin-top: 0!important;
   }
   #gk-logo.gk-small-logo img {
      bottom: 40px;
   }
   #gk-header-nav.active #gk-logo.gk-small-logo img {
      bottom: 115px;
      max-width: 120px;
   }
}


Adjust the values to your needs.

Dear Piotr,

thanks for your reply. I am rellay a little bit unfamiliar with the files I have to add - I put the code in the override.css file.
I attached a screenshot from my smartphone. The logo is not at the correct position. Which values do I have to change?

Regards

Sven

i added these lines

Code: Select all

#gk-header-nav.active #gk-logo {
   top: 40px;
}

@media (max-width: 640px) {
   #gk-logo {
      margin-top: 0!important;
   }
   #gk-logo.gk-small-logo img {
      bottom: 40px;
   }
   #gk-header-nav.active #gk-logo.gk-small-logo img {
      bottom: 115px;
      max-width: 120px;
   }
}

    @media (max-width: 640px) {
       #gk-logo {
          margin-top: 40;
       }
       #gk-header-nav.static #gk-logo {
          top: 0px;
          max-width: 100px;
          margin-left: -50px;
       }
       #gk-header-nav.active #gk-logo {
          top: 40;
       }
    .frontpage #gk-logo.gk-small-logo img {
       max-width: 100px;
       top: 40px;
    }
    }

I can't see the code on your website, please use any custom css plugin. It's described here:
https://www.gavick.com/blog/adding-cust ... ress-theme

it is in the override.css file in the themes folder

My fault. I had to edit the lines via dashboard/edit css.