Social Icons Color

• 

  zacheryhenry · Member · Oct 15, 2016 at 5:03 pm

  • Copy link
  • Add topic to favorites

  Is there a way to set a background color behind the social icons in the toolbar on the right? I’ve had multiple people say they can’t find my social icons, and when they do, they tell me that the icons blend in too easily with the page. Can I set the dark blue facebook background behind the facebook icon and the light blue shade for the twitter icon?

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

• 

  innisfreehomestead · Member · Oct 15, 2016 at 5:24 pm

  • Copy link

  Hello there!

  Dropping this code in your custom CSS area should do the trick:

  /* Change the background color behind the icons */
  .toolbar {
  	background-color: #f5f5f5;
  }
  
  /* Set the icon colors */
  #menu-social-icons #menu-item-348 a::before {
  	color: #3b5998;
  }
  
  #menu-social-icons #menu-item-347 a::before {
  	color: #55acee;
  }

  Let me know if that doesn’t work!
  Sage

• 

  zacheryhenry · Member · Oct 15, 2016 at 8:13 pm

  • Copy link

  That worked Sage! Thank you.

  Is there any way to make the BACKGROUND color change from white to these same colors on the box that pops out when you hover over the icon?

• 

  zacheryhenry · Member · Oct 15, 2016 at 10:23 pm

  • Copy link

  The first part of the code didn’t change the background color. The second part of the code successfully changed the color of the icons.

• 

  innisfreehomestead · Member · Oct 15, 2016 at 10:37 pm

  • Copy link

  Great to hear!

  Ah, I thought you were referring to the background of the toolbar itself, which did change to a slight off white :)

  Is this what you were thinking?

  .nav--toolbar #menu-item-348 a:hover {
  	background: #3b5998;
  	color: #FFF;
  	padding: 0 20px;
  }
  
  .nav--toolbar #menu-item-347 a:hover {
  	background: #55acee;
  	color: #ffffff;
  	padding: 0 20px;
  }
  
  /* And then to match the search block with the sizes above */
  #social-navigation .nav__item--search a {
  	padding: 0 20px;
  	background-color: #f5f5f5;
  }

  Hope that helps,
  Sage

• 

  zacheryhenry · Member · Oct 16, 2016 at 1:50 am

  • Copy link

  That worked! Thank you!

• 

  zacheryhenry · Member · Oct 16, 2016 at 5:12 am

  • Copy link

  One last question…

  Notice how when you scroll down the top menu follows. I had someone help me with the code for that in a previous thread. However, when you scroll down, and try to hover over the social icons, they fall behind the top menu. Is there a way to make it where when scrolled down on the page, the social icons – when hovered over – appear on top of the main menu and aren’t hidden? This would be ideal so visitors don’t have to scroll up to see the hover over for the icon. Thanks.

• 

  siobhyb · Member · Oct 17, 2016 at 4:38 pm

  • Copy link

  Hi @zacheryhenry,

  The following should do the trick:

  .toolbar { 
      z-index: 101; 
  }

  Hope that helps! If you have further questions then feel free to start a new thread on this forum.