Navigation Button Color Change

• 

  jimnancybarrett · Member · Mar 10, 2021 at 3:14 pm

  • Copy link
  • Add topic to favorites

  I made a previous post requesting help changing the color of the header but now the buttons on my navigation are black and I need them to be white so they can be seen against the purple background. Can anyone help me out with this? Thanks so much!

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

• 

  helper-heroponriki · Member · Mar 10, 2021 at 8:04 pm

  • Copy link

  Hi there!

  You’ll want to add this to fix the black navigation link:

  .main-navigation li.current-menu-item>a {
     color: white;
  }

  I also noticed your “Puppies” submenu was showing as white on white, so this should fix that as well:

  @media screen and (min-width: 560px) {
    .main-navigation > div > ul > li > .sub-menu {
      background-color: #9f51b3;
    }
  }

  I hope that helps!

• 

  jimnancybarrett · Member · Mar 11, 2021 at 2:36 am

  • Copy link

  Thank you so much! It’s very odd, for some reason when I am in the CSS editor, all the links are white, but when I go to the actual page, the links are still black (except the home button). Do you know if there’s any way I can fix that? Thank you so much again.

  This is all the custom CSS I have:

  
  @media only screen and (min-width: 560px) {
  #masthead {
  width: 100%;
  max-width: 100%;
  padding: 40px;
  background: #55016a;
  }

  #content {
  padding-top: 10px;
  }

  .site-title a:link,
  .site-title a:visited,
  .site-description,
  .main-navigation a,
  .main-navigation a:link {
  color: #ffffff;
  }

  #menu-primary {
  background-color: #55016a;
  }
  }

  .main-navigation li.current-menu-item>a {
  color: white;
  }

  
  @media screen and (min-width: 560px) {
  .main-navigation > div > ul > li > .sub-menu {
  background-color: #9f51b3;
  }
  }

• 

  jimnancybarrett · Member · Mar 11, 2021 at 2:40 am

  • Copy link

  Kidding, I figured it out, thanks!