Changing Active Submenu Background Color in Morden

• 

  bvghseattle · Member · May 23, 2023 at 6:27 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I have been making menu customizations to my site’s Morden theme and have adjusted all background colors with the exception of the active page display. When I am on a submenu item, the menu is highlighted in a color from the theme colors that I would like to change without adjusting the theme itself. After searching for other people with the same issue, I have not been able to find a solution that works. The code I used to adjust other sections of the menu is:

  /*— Menu Options Change —*/
  /*Change header background color*/
  header#masthead.site-header {
  background-color: #fff;
  }
  /*Change top menu font color*/
  nav#site-navigation.main-navigation a {
  color: #000;
  }
  /*Change submenu background color*/
  .site-header-wrap .main-navigation > div > ul > li:hover > ul a { background-color: white;
  }
  .site-header-wrap .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
  background-color: whitesmoke;
  }
  /*Change submenu background color*/
  .site-header-wrap .main-navigation > div > ul > li:hover > ul a:hover { background-color: whitesmoke;
  }
  .site-header-wrap .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a:hover {
  background-color: whitesmoke;
  }

  Any thoughts on how to adjust the background display of the active page when it is listed as a submenu? Thanks!

  WP.com: Yes
  Jetpack: Yes
  Correct account: Yes

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

• 

  aisajib · Member · May 24, 2023 at 6:23 am

  • Copy link

  Hi there!

  Could you try using the following CSS code (add it on My Site → Appearance → Customize → Additional CSS) to see if it does what you’re looking for? You can change the color code to something else you want.

  .site-header-wrap .main-navigation > div > ul > li:hover > .sub-menu > li.current_page_item > a {
  	background-color: #cc3399;
  }

  Let us know how it goes.

  Thanks!