Yelp Logo

• 

  booncroft · Member · Dec 10, 2016 at 4:44 pm

  • Copy link
  • Add topic to favorites

  I have social links at the bottom of my page. You can see the instagram and the FB links/thumbnail just fine. I had a Yelp logo when i was in a different theme and added CSS per this forum, but I don’t think it’s translating. Any help here?

  /*Yelp Icon*/

  #menu-item-48 a:before {
  background-image: url(‘https://proofingcom.files.wordpress.com/2016/11/1480454649_yelp_white.png’);
  background-size: cover;
  background-repeat: no-repeat;
  content: ‘ ‘;
  }

  https://proofingcom.wordpress.com

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Dec 12, 2016 at 8:50 pm

  • Copy link

  Hi there, firstly, the menu item id number is different, so we need to correct that. I’d also on this theme suggest adding the image to the a element rather than using the “before” pseudo. Replace the current CSS you have with the following and see what you think.

  #menu-item-195 a {
  	background-image:url('https://proofingcom.files.wordpress.com/2016/11/1480454649_yelp_white.png');
  	background-size:70% auto;
  	background-repeat:no-repeat;
  	background-position-y: 10px;
  	display: block;
  }
  #menu-item-195 a:hover {
  	color: rgba(0, 0, 0, 0)
  }
  #menu-item-195 {
  	line-height: 44px
  }

• 

  booncroft · Member · Dec 13, 2016 at 6:38 am

  • Copy link

  great thanks!

• 

  thesacredpath · Member · Dec 13, 2016 at 6:47 pm

  • Copy link

  You are welcome.

• 

  booncroft · Member · Dec 13, 2016 at 9:29 pm

  • Copy link

  Fyi the yelp logo appears to be a little higher than the rest when viewing in phone and tablet view. Can u advise?

• 

  thesacredpath · Member · Dec 14, 2016 at 2:21 am

  • Copy link

  You can adjust that by adding back in the following to the first CSS rule.
  background-position-y: 10px;
  You can play with the 10px value, and also the % value on the background size

• 

  booncroft · Member · Dec 19, 2016 at 11:17 pm

  • Copy link

  this works great!

  background-position-y: 10px;

  however after I click save and then refresh page to see changes, the code somehow disappears and then I need to redo.

  Can you please advise?

• 

  thesacredpath · Member · Dec 20, 2016 at 6:33 am

  • Copy link

  Wow, I must be losing it. Two mistakes on one user. Sorry again. Replace the full #menu-item-195 a rule with the following.

  #menu-item-195 a {
  	background-image:url('https://proofingcom.files.wordpress.com/2016/12/1480454649_yelp_white.png');
  	background-size:85% auto;
  	background-repeat:no-repeat;
  	display:block;
  	background-position: center 5px;
  	color: rgba(0, 0, 0, 0);
  }