How to change the over color for the menu bar

• 

  rmarkjr · Member · Mar 21, 2017 at 9:37 pm

  • Copy link
  • Add topic to favorites

  Ok so I am having a lot of trouble finding the right tags to use in CSS . I am not talking like H1 H2 that will affect everything. I am talking about selecting just one thing on one page.

  Like I have

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

• 

  thesacredpath · Member · Mar 22, 2017 at 2:53 am

  • Copy link

  Hi, the best way to do this is by using the web inspector built into your browser to find the correct CSS classes and ids. We have a How to Find Your Theme’s CSS support page with some short screencasts that will get you started with that.

  I see you have the following in your custom CSS to change the non-hover color of your menu items to white.

  .wf-active .menu-item-18 a {
  	color:#fff
  }
  .wf-active .menu-item-19 a {
  	color:#fff
  }
  .wf-active .menu-item-20 a {
  	color:#fff
  }
  .wf-active .menu-item-21 a {
  	color:#fff
  }

  Using the unique menu item CSS class works, but typically is used if you want to specifically target one item, or perhaps set each menu item to a different color. We can replace the four rules you have above with the following since they are all going to be one color. The second rule is for the hover color.

  .main-navigation a {
  	color: #fff !important;
  }
  .main-navigation a:hover {
  	color: #ff00d7 !important;
  }