Changing Drop Down Menu Color in Argent

• 

  ryanmarkrongone · Member · Jul 9, 2015 at 7:23 pm

  • Copy link
  • Add topic to favorites

  Hello! I’m trying to change the color of the drop down menus on my Argent themed site. Right now, they are black and are a bit too dark which makes it hard to read the text of the sub menus. I’ve tried a number of different text colors, but nothing I choose makes it any easier to read. Or maybe if I could change the drop down menu text to white, that would help. But I can’t do that without changing the whole background color. Thanks for your help!

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

• 

  thesacredpath · Member · Jul 9, 2015 at 7:54 pm

  • Copy link

  Hi there, the Happiness Engineer you were chatting with just sent me this CSS to give to you.

  .main-navigation ul ul a {
      color:#fff;
  }

  I also noticed that the menu text on the submenus, when you hover them, have a black color. To set that, add the following as well and adjust the color as you desire. It is best for visitors if the color between non-hover and hover are slightly different. I’ve used a light grey for the hover in the following.

  .main-navigation ul ul a:hover {
      color: #999;
  }

  Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the above custom CSS.

• 

  ryanmarkrongone · Member · Jul 9, 2015 at 10:21 pm

  • Copy link

  Great! Thanks for the help! Is there a way I can change the drop down menu’s background color from black to something else?

• 

  thesacredpath · Member · Jul 9, 2015 at 10:25 pm

  • Copy link

  You bet. Add this and then adjust the background color as desired.

  .main-navigation ul ul {
      background: #cc0000;
  }

• 

  ryanmarkrongone · Member · Jul 9, 2015 at 10:33 pm

  • Copy link

  Thanks so much! Last question.. I think.. When I look at the site on mobile devices, obviously it’s going to be slightly different. But on an iPad, the drop down menus are transparent, so it’s just the teal colored text against that blue sky/ocean. Did I do something to make that change somewhere along the way? I would think it should be the same color scheme as when I view it on my laptop? When looked at on a phone, it’s the totally different layout for phones which is totally fine.

  Thanks again!

• 

  ryanmarkrongone · Member · Jul 9, 2015 at 10:40 pm

  • Copy link

  Ahh figured it out. I changed the colors and now it’s great on all devices. Maybe it wasn’t showing up before because I hadn’t actually set a background color? Either way, thanks for all your help and quick responses! Cheers!

• 

  thesacredpath · Member · Jul 10, 2015 at 2:22 am

  • Copy link

  You are welcome.