Customising CSS in Expound Theme

• 

  meredithblis · Member · Apr 3, 2014 at 5:17 pm

  • Copy link
  • Add topic to favorites

  Hi all!

  I’m trying to change the color of the blue (current page selected) box on the menu bar. It’s the original color that comes with the Expound Theme. I’ve figured out the CSS to change other things, I just can’t figure this one out!

  The site is not live yet so I’m not sure how to send you a link to view it.

  Thanks!

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

• 

  meredithblis · Member · Apr 3, 2014 at 9:58 pm

  • Copy link

  The site I need help with is http://meredithblismusiccoaching.com it’s self hosted not a wordpress.com site (not sure why that’s showing in my previous comment!)

• 

  meredithblis · Member · Apr 4, 2014 at 1:02 am

  • Copy link

  I figured it out, here is the code if anyone is looking for the same kind of change. Just make sure you change the three color codes to the color your looking for (all three codes need to be the same color code)

  .navigation-main ul > .current_page_item,
  .navigation-main ul > .current-menu-item,
  .navigation-main ul > .current-post-ancestor,
  .navigation-main ul > .current-menu-ancestor,
  .navigation-main ul > .current-menu-parent,
  .navigation-main ul > .current-post-parent,
  .navigation-main ul > .current_page_item:hover,
  .navigation-main ul > .current-menu-item:hover,
  .navigation-main ul > .current-post-ancestor:hover,
  .navigation-main ul > .current-menu-ancestor:hover,
  .navigation-main ul > .current-menu-parent:hover,
  .navigation-main ul > .current-post-parent:hover{
  background: #6e2864;
  }
  /*———- triangle on current ———-*/
  .navigation-main ul > .current_page_item a:after,
  .navigation-main ul > .current-menu-item a:after,
  .navigation-main ul > .current-post-ancestor a:after,
  .navigation-main ul > .current-menu-parent a:after,
  .navigation-main ul > .current-post-parent a:after {
  border-color: #6e2864 #fff #fff;
  }
  /*———- triangle on hover ———-*/
  .navigation-main ul > .current_page_item:hover a:after,
  .navigation-main ul > .current-menu-item:hover a:after,
  .navigation-main ul > .current-post-ancestor:hover a:after,
  .navigation-main ul > .current-menu-ancestor:hover a:after,
  .navigation-main ul > .current-menu-parent:hover a:after,
  .navigation-main ul > .current-post-parent:hover a:after {
  border-color: #6e2864 #fff #fff;
  }