Different logo for mobile devices

tphoenix5

Is there some css or an option where we can display a smaller or different logo when on a mobile device?

dominic

Hi tphoenix5,
You can select the Logo type is From CSS, in the Dashboard > Template styles > Feature tab.
Then use the following CSS code to add another logo for mobile devices:

@media (max-width: 480px) {
#gkLogo.cssLogo {
  background: transparent url('Your URL to image') no-repeat 0 0;
  height: 30px;
  width: 154px;
}
}

tphoenix5

Strange. It doesn't seem to be working. What I do see is an image STC. I have added your css to the media block. The following is what I have in the custom css now.

The dev website is https://dev.coventrycreations.com

@media only screen and (max-width: 580px)
{
#gkLogo.cssLogo, #gkLogoSmall.cssLogo { background: transparent url('/images/logo/qwe.png') no-repeat 0 0; height: 65px; width: 251px; }

  body {    
  background-color: #ffffff;    .body-oc #search-oc .input-lg {    width: 235px;           }     
  .body-oc #search-oc .btn-lg { margin-right: -20px;  }
  #gkHeaderBottom .box { padding: 0 0px;       }
  p {  display: none; }

}
}

Any suggestions?

dominic

Hi tphoenix5,
You can add the following CSS code to the templates/gk_storebox/css/override.css file

@media (max-width: 580px) {
	#gkLogo.cssLogo {
		background: transparent url('../images/custom-logo.png') no-repeat 0 0;
		/* You can specify there logo size and background */
		height: 30px;
		width: 154px;
	}
}

Then add your logo file to the templates/gk_storebox/images folder.
If you still face this issue, you can send me the admin account for further checking.

tphoenix5

I added the code and get the same results. I have updated your access info in the thread.

Thanx

dominic

Hi tphoenix5,
I have checked and see that you have some syntax error in the CSS code in the Custom CSS, I have added the following CSS code to the Systems > Site template styles > gk_storebox - Default > Advanced settings > Custom CSS:

@media only screen and (max-width: 580px) {
    #gkHeaderNav a#gkLogo.cssLogo {
        background: transparent url(/templates/gk_storebox/images/gavern-logo.png) no-repeat 0 0;
        height: 50px;
        width: 50px;
    }
}

You can change the logo name here: gavern-logo.png.
Additionally, you haven't added the logo image to the templates/gk_storebox/images folder.

tphoenix5

Thanx for the help.