Theme Colors

• 

  williamdane · Member · Jul 22, 2016 at 4:14 am

  • Copy link
  • Add topic to favorites

  So I have a piece of CSS that plays with the menu items so that when you hover over it, the background and font colors change. But, it’s not affecting the social media buttons on the right hand side of the navigation bar. When hovering over the social media links, I’d like the background to stay white and the icon to turn orange (#F27127). Does anyone know of a command for this?

  
  @media (min-width: 768px) {
  .main-navigation li a {
  margin: 0 1rem 0 0;
  padding: 5px 10px;
  border: none;
  }
  .main-navigation ul ul li a:hover {
  color: #000
  }
  .main-navigation ul ul :hover > a {
  background-color: #f27127;
  border-color: transparent;
  }
  }
  .main-navigation a:hover {
  color: #ffffff;
  background: #f27127;
  }

  Also, how can I get the date tag on posts to be reversed, so that the background is white and the text is black?

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

• 

  hallluke · Member · Jul 22, 2016 at 7:46 am

  • Copy link

  Here’s the code you’ll need. It should work even if you add more social links:

  #menu-social a:hover {
  	background-color: #fff;
  }
  #menu-social.apostrophe-social li:hover a::before {
  	color: #f27127;
  }

• 

  thesacredpath · Member · Jul 22, 2016 at 8:02 am

  • Copy link

  Hi there, The social media icons are in the main-navigation div, but they have their own CSS selectors for some things. See if this is what you are looking for.

  .apostrophe-social li a:hover::before {
      color: #F27127 !important;
  }
  .apostrophe-social li a:hover {
      background: #fff;
  }

• 

  thesacredpath · Member · Jul 22, 2016 at 8:02 am

  • Copy link

  I should have refreshed as @hallluke beat me to it. :)