Change colour of sub menu when hovered over

• 

  theonecoleman2014 · Member · Jan 23, 2015 at 3:55 pm

  • Copy link
  • Add topic to favorites

  Hey happiness creators,

  I’ve been having this problem for a little while now.

  Previous help has enabled me to change the main navigation header colour to blue with white text, when hovered over this changes to white box with blue text.

  I would like to do this with my sub headers also.

  I have tried my best, but needing some professional help. :D

  I hope someone has knowledge in this area to help.

  Thanks guys

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

• 

  briansteeleca · Member · Jan 23, 2015 at 4:36 pm

  • Copy link

  Have a look in your custom CSS for something like this:

  #nav li a:hover,
  #nav li a:active,
  #nav .current_page_item a,
  #nav .current-cat a,
  #nav .current-menu-item a,{
    background-color: #fff;
    color: #5590cc;
  }

  And then try expanding it to include a selector for each sub-menu item:

  #nav li a:hover,
  #nav li a:active,
  #nav .current_page_item a,
  #nav .current-cat a,
  #nav .current-menu-item a,
  #nav li .sub-menu li a:hover,
  #nav li .sub-menu li a:active,
  #nav .current_page_item .sub-menu li a,
  #nav .current-cat .sub-menu li a,
  #nav .current-menu-item .sub-menu li a {
    background-color: #fff;
    color: #5590cc;
  }

  Give that a try and see if it works.

• 

  theonecoleman2014 · Member · Jan 23, 2015 at 5:02 pm

  • Copy link

  ?
  POW! Head just exploded.

  I’ll give it a go, but i’m unsure of the results

• 

  theonecoleman2014 · Member · Jan 23, 2015 at 5:08 pm

  • Copy link

  Ok, So i literally just copied your code into my CSS and it’s working exactly how i wanted it too. Thanks so much,

  Just one more thing… Is it possible to create a thicker border on sub menu?

• 

  briansteeleca · Member · Jan 23, 2015 at 5:36 pm

  • Copy link

  Lol, sorry about exploding your head. I know it looks like gibberish if you’ve never worked with it before.

  I see it works except for the dropdown menu of the current page – the whole dropdown menu is turning white. For instance, go to the Motivation page, and then hover over the items in the Review menu, only the item you’re hovering over turns white with blue text. I think that’s how it should work.

  Try replacing it again with this code – then the border may not matter:

  #nav li a:hover,
  #nav li a:active,
  #nav .current_page_item a,
  #nav .current-cat a,
  #nav .current-menu-item a,
  #nav li .sub-menu li a:hover,
  #nav li .sub-menu li a:active {
  	background-color: #fff;
  	color: #5590cc;
  }

• 

  daisychainsanddreamers · Member · Jan 23, 2015 at 6:12 pm

  • Copy link

  Hello, Sorry to jump in on this but I’m having a similar problem. I am redesigning my site and have replaced the menu items in my nav bar with images (I haven’t yet deployed the changes). My problem is the hover states. I have replaced the menu items with images without trouble but when hovered over, big black rectangles appear, covering the images. This is even more of a problem with my drop down menu.

  Any idea as to how to get rid of this altogether? I still want the cursor to change when hovered over the image but that is all.

  Thanks

• 

  theonecoleman2014 · Member · Jan 23, 2015 at 10:18 pm

  • Copy link

  Thanks so much for your help Brian. Really appreciate it :D

  Daisy, I hope find a a solution.

  Thanks again.

• 

  theonecoleman2014 · Member · Jan 23, 2015 at 10:20 pm

  • Copy link

  Also… Just had a look at your sample work Mr Steele. Super impressed. I will make a note of your website as I will need some help later on with an e-commerce site.

  Thanks again.

• 

  briansteeleca · Member · Jan 23, 2015 at 10:26 pm

  • Copy link

  Thanks theonecoleman2014, I’m happy to help. :-)

  And I apologize but I’m going to change the code again to try to keep the main menu item highlighted. Unfortunately I won’t know if it works correctly until you try it (at your leisure of course).

  #nav li a:hover,
  #nav li a:active,
  #nav .current_page_item > a,
  #nav .current-cat > a,
  #nav .current-menu-item > a,
  #nav .current-menu-parent > a,
  #nav .current_page_parent > a,
  #nav li .sub-menu li a:hover,
  #nav li .sub-menu li a:active {
  	background-color: #fff;
  	color: #5590cc;
  }

• 

  briansteeleca · Member · Jan 23, 2015 at 10:28 pm

  • Copy link

  @Daisy, I’d recommend starting a new thread. Can you also provide a link to your website so we can see it? Thanks.

• 

  daisychainsanddreamers · Member · Jan 23, 2015 at 10:41 pm

  • Copy link

  Thanks,

  http://www.daisychainsanddreamers.com

• 

  briansteeleca · Member · Jan 23, 2015 at 11:54 pm

  • Copy link

  @Daisy This isn’t necessarily how I would do this if I was starting from scratch, but this will hopefully get you closer to what you’re trying to accomplish.

  You’ll want to replace color: red with your own color and the image with the image you want behind the menu items.

  Btw, you may notice in your stats that I hit your site about a 1000 times. ;)

  /* remove black from menu and sub menu */
  #access ul, #access ul ul {
      background: #fff;
  }
  
  /* make menu text black and border white
  #access ul a, #access ul ul a {
      color: black;
      border-color: #fff;
  }
  
  /* add your text color and background image to menu items */
  #page #access li:hover > a, #page #access li a:hover, #page #access li a:active, #page #access .current_page_item > a, #page #access .current-cat > a, #page #access .current-menu-item > a, #page #access .current-menu-parent > a, #page #access .current_page_parent > a, #page #access li .sub-menu li a:hover, #page #access li .sub-menu li a:active {
      color: red;
      border-color: #fff;
      background: #fff url(https://daisychainsanddreamers.files.wordpress.com/2014/05/twitter.png);
  }

• 

  daisychainsanddreamers · Member · Jan 24, 2015 at 12:31 am

  • Copy link

  Thanks! I have sorted the problem now.

  However another issue has occurred! When i am active on a page, the menu item (nav image) is hidden behind a grey box. This happens on all active pages but only then. The same happens with the drop down menu items, however instead of a grey box they simply disappear when the page is active. Any idea?

• 

  thesacredpath · Member · Jan 25, 2015 at 2:51 am

  • Copy link

  Hi, I’m seeing a grey background with a darker grey for the menu label when I am on your about page. Did you get this sorted out, or perhaps did I misunderstand? Is what you have now how you want it, or do you want to adjust things?

• 

  briansteeleca · Member · Jan 25, 2015 at 6:54 pm

  • Copy link

  Did you try the CSS that I posted above? I don’t see a grey box when I apply these styles to your site.

  I do see that I made a typo though – I forgot to close one of the comments. It should be:
  /* make menu text black and border white */

  On your current site, it looks like the grey box is set here:

  #access li.current_page_item a, #access li.current-menu-item a {
  	background: #eee;
  	color: #777;
  }

  In my code, that grey background is replaced with an image.

• 

  daisychainsanddreamers · Member · Jan 25, 2015 at 10:03 pm

  • Copy link

  Thanks both. I have tried both but still have an odd grey box on active pages. :s

• 

  daisychainsanddreamers · Member · Jan 25, 2015 at 10:08 pm

  • Copy link

  So i’ve managed to make the box disappear by doing this as suggested:

  #access li.current_page_item a, #access li.current-menu-item a {
  background: none;
  color: none;
  }

  however when active, the relevant page menu image disappears.

  Any idea?

• 

  daisychainsanddreamers · Member · Jan 25, 2015 at 10:15 pm

  • Copy link

  So I’ve worked out! I need to add the following but change for each menu item:

  #access li#menu-item-4574 a, #access li#menu-item-4574 a {
  background: url(“https://daisychainsanddreamers.files.wordpress.com/2015/01/abouthover.jpg”) no-repeat;
  background-size: 65%;
  color: none;
  }

• 

  briansteeleca · Member · Jan 25, 2015 at 10:30 pm

  • Copy link

  Cool.

  And you should be able to use a relative url for your image:
  url("/2015/01/abouthover.jpg")

• 

  briansteeleca · Member · Jan 25, 2015 at 10:58 pm

  • Copy link

  And one other thing I should mention: you may want to try being less specific with your selector. You may already know this but I’ll explain anyway.

  Every menu item will have a different ID. IDs are unique – there can only be one per page. The menu item you’re applying the rule to with li#menu-item-4574 is specifically the About Me menu (# is for IDs):

  <li id="menu-item-4574" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4574"><a href="http://daisychainsanddreamers.com/about-me/">About Me</a></li>

  Classes on the other hand are a way of applying a style to many items at once. So if you want to apply a style to all menu items, you could use the class that they all share, like this ( . is for classes):

  #access li.menu-item a { }