Morden Theme – Incorrect Colour Drop Down menus

• 

  municipalleadersgroup · Member · Aug 7, 2020 at 10:27 pm

  • Copy link
  • Add topic to favorites

  Hello, I’m struggling with getting our Drop Down Menus to format in a different colour (right now they’re not what I’d like), and for the life of me I can’t figure out how to do that. The Menu colours are different on the main and secondary pages (and not in a good way at that!). The web page is: http://www.ladderupconsulting.com

  Many thanks in advance!

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

• 

  kokkieh · Staff · Aug 8, 2020 at 11:14 am

  • Copy link

  Hi there,

  This is being caused by the custom CSS code added in the Customizer. You have an !important in there, which causes that CSS to override any other changes you might make to the menu elsewhere. That CSS code also just changes the font color, not the background of the submenu.

  Remove the CSS you have added in the Customizer, and replace it with this:

  /*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: green;
  }
  
  .site-header-wrap .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
  	background-color: green;
  }
  
  /*Change submenu background color*/
  .site-header-wrap .main-navigation > div > ul > li:hover > ul a:hover {	background-color: blue;
  }
  
  .site-header-wrap .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a:hover {
  	background-color: blue;
  }

  Also note that your plan gives you access to 24/7 live chat and direct email support for help with questions like this. You can reach those at any time by clicking the Help icon that appears bottom-right on all the My Sites pages, or else via the direct link at https://wordpress.com/help/contact

• 

  slantedplanet · Member · Aug 8, 2020 at 8:21 pm

  • Copy link

  One finer point to add to @kokkieh’s CSS, I noticed that the last comment is a duplicate of the previous one. If you think you might refer to the comments in the future, you should revise the last comment to indicate that the code sets the submenu background hover color.

  Here is a complete example with all of @kokkieh’s CSS and revised comments:

  
  /* set header background color */
  header#masthead.site-header {
  	background-color: #fff;
  }
  
  /* set top level menu font color */
  nav#site-navigation.main-navigation a {
  	color: #000;
  }
  
  /* set submenu background color */
  .site-header-wrap .main-navigation > div > ul > li:hover > ul a {	
  	background-color: green;
  }
  
  .site-header-wrap .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a {
  	background-color: green;
  }
  
  /* set submenu background hover color */
  .site-header-wrap .main-navigation > div > ul > li:hover > ul a:hover {	
  	background-color: blue;
  }
  
  .site-header-wrap .main-navigation > div > ul > li.current-menu-item li.current-menu-item > a:hover {
  	background-color: blue;
  }