Need to change background color for sub menu.

• 

  staff-arya · Staff · May 14, 2019 at 6:47 am

  • Copy link
  • Add topic to favorites

  Hello,

  I am trying to change the background color for sub-menu in my main menu from grey to black.
  I did an inspect element and changed the following CSS:

  .main-navigation ul ul, .main-navigation ul {
  background-color: #111;
  }

  It worked fine there.

  But when I added it to my custom CSS, it showed a different behaviour.
  It shows black when I hover over Blog, but when I hover over the sub menu items under that (Poems and WordPress), the color for the ‘BLOG’ becomes grey again.

  I am not sure what am I missing there. Is it possible that when I check through inspect element, it’s in a different state while when I actually apply the CSS, it’s different.

  I have currently applied this CSS to my site to make the problem visible.

  Thanks!

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

• 

  kokkieh · Staff · May 14, 2019 at 10:36 am

  • Copy link

  Hi there,

  I did an inspect element and changed the following CSS:

  .main-navigation ul ul, .main-navigation ul {
  background-color: #111;
  }

  That’s not a reliable method, no. To test CSS in the dev tools, you’ll instead need to use the Style Editor section of the dev tools rather than the Inspector.

  This code should do it:

  .main-navigation li:hover, .main-navigation li:focus, .main-navigation a:hover, .main-navigation a:focus, .main-navigation ul ul, .main-navigation ul ul ul ul, .main-navigation ul ul ul ul ul ul, .main-navigation ul ul ul ul ul ul ul ul, .main-navigation ul ul ul ul ul ul ul ul ul ul, .main-navigation ul ul ul a:hover, .main-navigation ul ul ul a:focus, .main-navigation ul ul ul li:hover, .main-navigation ul ul ul li:focus, .main-navigation ul ul ul ul ul a:hover, .main-navigation ul ul ul ul ul a:focus, .main-navigation ul ul ul ul ul li:hover, .main-navigation ul ul ul ul ul li:focus, .main-navigation ul ul ul ul ul ul ul a:hover, .main-navigation ul ul ul ul ul ul ul a:focus, .main-navigation ul ul ul ul ul ul ul li:hover, .main-navigation ul ul ul ul ul ul ul li:focus, .main-navigation ul ul ul ul ul ul ul ul ul a:hover, .main-navigation ul ul ul ul ul ul ul ul ul a:focus, .main-navigation ul ul ul ul ul ul ul ul ul li:hover, .main-navigation ul ul ul ul ul ul ul ul ul li:focus, .main-navigation ul ul ul ul ul ul ul ul ul ul ul a:hover, .main-navigation ul ul ul ul ul ul ul ul ul ul ul a:focus, .main-navigation ul ul ul ul ul ul ul ul ul ul ul li:hover, .main-navigation ul ul ul ul ul ul ul ul ul ul ul li:focus, .main-navigation ul, .main-navigation ul li.current_page_item > a, .main-navigation ul li.current-menu-item > a, .main-navigation ul li.current_page_ancestor > a {
      background-color: #111;
  }

  It takes the existing CSS selector controlling the background color for submenus, and just applies a new value to it.

• 

  staff-arya · Staff · May 14, 2019 at 11:21 am

  • Copy link

  Hello @kokkieh,

  Thank you for your reply.

  That’s not a reliable method, no. To test CSS in the dev tools, you’ll instead need to use the Style Editor section of the dev tools rather than the Inspector.

  I check it under elements > Styles. Is there a different style editor section that I should know of?

  The above code applies to all menu and sub menus including focus and hover effects making everything’s background black.
  What I want instead is just the background color for menu and sub menu black and background of hover and focus effects to be blue instead.

  I figured it out I guess. The update code that I use is:

  .main-navigation ul ul, .main-navigation ul, .main-navigation ul li:hover 
  {
  background-color: #111;
  }

  This does the job just fine.
  I hope I don’t find something else that it breaks. :)

  Thank you very much!