Welcome! To use this support forum, please Login or Join Today!

   

replace logo image on mobile

{name}
Rank

Total Posts: 2

Joined 2014-10-16

PM

 

Summary: I am using Breeze v 2.1.9 (a great theme, by the way), and would like to have an alternative logo graphic for mobile devices. 

Specifics:  We have a site goldensrule2015.org which has a header including a logo and a ‘tag line’ in that logo (the text to the right of the image which states “2015 National Specialty Golden Retriever Club of America). This text is included in the logo image set via Appearance> Theme Options>Header>Logo Image. This image is 483x120.

On mobile devices, the logo gets in the way of the menu bar.  Therefore, I’d like to replace this logo with a centered image of the dog sitting in the chair (no text) on mobile devices.  This image is located at http://www.goldensrule2015.org/wp-content/uploads/2015/05/banner_white_BG_justlogo.png.  I’m using a Breeze child template and am somewhat new to WordPress.

I’ve tried to use a media filter, e.g. by placing the following in style.css of the child theme:

@media only screen and (max-width 480px{
 
#header #site-title.graphic a{
background-imageurl("http://www.goldensrule2015.org/wp-content/uploads/2015/05/banner_white_BG_justlogo.png");
 
width94px;
 
height117px;
 
margin10px 0px 10px 0px
 }

I’ve turned off all cacheing, yet it doesn’t seem to properly replace the file. I’ve been able to ‘add’ an additional background image (without the text, I think) by omitting the ‘a’ tag in the above code. However, that is not what I’m attempting to accomplish. I really feel close, but I don’t know where I’m missing the point.

Any help would be terrific.
Thanks!
Rob

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

You’re on the right track. Try adding this to the bottom of style3.css:
(wp-content/themes/breeze-child/style3.css)

@media only screen and (max-width : 640px) {
 #wrap #header #site-title.graphic a{
  background-image: url("http://www.goldensrule2015.org/wp-content/uploads/2015/05/banner_white_BG_justlogo.png");
  width: 94px;
  height: 117px;
  }
}
{name}
Rank

Total Posts: 2

Joined 2014-10-16

PM

 

Thanks, @Casey!  This worked like a champ! I guess my big problem was ‘order of operations’.