Make Each Drop Down a Different Color...?

(8 posts) (3 voices)

1. 

   bengillin
   Member

   I was wanting to make each drop down menu a different color similar to http://www.blackstone.com and wanted to know how to go about this. Thanks in advance!

   Posted 1 year ago #
2. 

   Elliott
   Support

   Hello bengillin, sorry for the late reply.

   You will need to right click on your site and view the source code for your drop downs. Once you find the one you want to color note it's ID, it will be something like this.. id = "menu-item-35".

   Once you know that you will need to add this line in /wp-content/themes/infocus/style.css

   .jqueryslidemenu #menu-item-35 ul { background-color: blue !important; }

   and then repeat it for each sub menu. Let us know if this helps bengillin.

   Posted 1 year ago #
3. 

   bengillin
   Member

   Elliott!

   Sorry for my late response! You guys are awesome by the way. I am about to go do this... :)
   I will let you know what happens but I'm sure this will work.

   Have a great day Elliot!

   Ben

   Posted 1 year ago #
4. 

   Elliott
   Support

   Alrighty, keep us updated bengillin.

   Posted 1 year ago #
5. 

   bengillin
   Member

   Hey Elliot,

   This was the code that ended up working for me:

   .jqueryslidemenu #menu-item-397 .sub-menu {background: red !important; width: 140px;}
   .jqueryslidemenu #menu-item-397 .sub-menu a {color: white !important;}

   Thanks!

   Ben

   Posted 1 year ago #
6. 

   awilson3rd
   Member

   Hello,

   I would like to do the same for the Echelon theme and was wondering if I can use a hex value for the color? Also, how would I change the color of the border on the drop down menu.

   Thanks

   Andrew

   Posted 5 months ago #
7. 

   Elliott
   Support

   Hello awilson3rd,

   Yes you can use hex colors also. To change the border you would add this in Dashboard -> your theme -> General Settings -> Custom CSS,

   .jqueryslidemenu ul ul {
       background: none repeat scroll 0 0 #000000 !important;
       border: 1px solid #000000 !important;
   }

   Posted 5 months ago #
8. 

   awilson3rd
   Member

   Excellent, thanks very much for the prompt reply.

   Andrew

   Posted 5 months ago #

RSS feed for this topic

Reply

You must log in to post.