How to set "main menu" items with different colors

Generally, menu items have a unique id or class assigned to them — so you can use that as a selector in the CSS code to define a color. Code specifics would depend on your theme and site.

I am using gabfirethemes opinion theme..

and when i asked the developer he said this: “In short, each menu item would be its own list item.
So right now the source code generated would be <li>, but in your scenario, each list item would be different and look something like this: <li class="some-color-class"> “
—still don’t know how to do it exactly.. any help would be very much appreciated.

[mod: please remember to mark any posted code – https://codex.www.ads-software.com/Forum_Welcome#Posting_Code ]

Well, that’s not very helpful because you’d need a way to assign the color class. The better/easier way is, as I said, to use the already assigned unique class for each menu item — for example, in twentyeleven, a menu item HTML might look like this:

<li class="page_item page-item-2">

So then in the CSS code you could use:

#access li.page-item-2 {
   background-color:  #xxxxxxx;
}

Note that this above is example code and is not specific to your site.

Also, PLEASE, please use the backticks or code buttons when posting code — as you can see, your code messed up the forum page here…

please do contact gabfirethemes for support with your problem.

this forum does not and cannot support commercial theme apart from general advice.

alchymyth,

all i am asking for is general advice, this question is not gabfirethemes specific question as i understand.thanks.

WPyogi, below is the code for the main navigation and the menu ids are:
menu-item=20,menu-item=21,menu-item=24. which line should i edit? thanks.

/* ={ MAIN NAVIGATION } */
	#mainmenu {display:block;margin: 5px 0 0;width:100%;border-top:1px solid #eee;border-bottom:4px solid #eee;}
		#mainmenu .wrapper {padding-right:0;padding-left:0;margin-bottom:0}
		#mainmenu select {display: none;}
		.mainnav {width:910px}
		.mainnav:after{content:"";display:block;clear:both;}
		.mainnav li {float:left;position:relative;border-right:1px dotted #ddd}
		.mainnav li a {color:#797a7c;padding:7px 17px;font-size: 13px;line-height:18px;margin:0 2px}
		.mainnav li a:hover,.mainnav li.sfHover a {color:#674693;}
		.mainnav li.current_page_item a, .mainnav li.current-cat a, .mainnav li.current-menu-item a, .mainnav li.current-cat-parent a {color:#555;background:#ffd100}
		.mainnav li.first-cat {border-left:1px dotted #ddd}

		.mainnav li.gab_logintools {float:right;border:none;margin:0;padding:0}
		.mainnav li.gab_logintools a {padding:0;margin-right:0;font-size:12px;line-height:13px;font-weight:bold}
		.mainnav li.gab_logintools span {float:left;display:block;}
		.mainnav li.gab_logintools span.gab_signin a {color:#fff;background:#61bada;padding:5px 15px;margin:5px 10px 0 0;-moz-border-radius: 4px;-webkit-border-radius:4px;border-radius: 4px;}
		.mainnav li.gab_logintools span.gab_signin a:hover {color:#666;background:#ffd100}
		.mainnav li.gab_logintools span.gab_login a {z-index:1;color:#715f10;text-shadow:#fff 1px 0px 0px;background:url(default/bg_login.png) no-repeat;width:67px;height:64px;position:absolute;margin-top:-10px;padding:34px 0;text-align:center;-moz-border-radius: 4px;-webkit-border-radius:4px;border-radius: 4px;}
		.mainnav li.gab_logintools span.or {background:#eee;padding:4px 5px;margin:7px 6px 0 0;-moz-border-radius: 10px;-webkit-border-radius:10px;border-radius: 10px;font-size:11px;line-height:11px;}

		.mainnav li ul  {border-bottom:1px solid #ddd;position:absolute;z-index:999;width:180px;margin:0}
		.mainnav li ul li  {float:none;}
		.mainnav li li a,.mainnav li.current_page_item li a .mainnav li.current-cat li a, .mainnav li.current-menu-item li a,.mainnav li.current-cat-parent li a  {background:#fff;color:#797a7c;}
		.mainnav li li.current_page_item a, .mainnav li li.current-cat a, .mainnav li li.current-menu-item a,.mainnav li li.current-cat-parent a  {background:#efefef;color:#797a7c;}
		.mainnav li ul li a,li.sfHover li a{background:#f9f9f9;color:#797a7c !important;text-transform:none; font: 12px arial, tahoma, verdana, sans-serif;padding:4px 10px; height:auto; line-height:normal;margin:0; border:1px solid #ddd; border-bottom:0 !important}
		.mainnav li ul li a.sf-with-ul { padding:5px 10px;}
		.mainnav li ul li a:hover  {background:#efefef;color:#797a7c;}
		.mainnav li ul ul  {margin: -25px 0 0 179px;padding-top:0;}

I’m sorry but it is beyond the scope of these forums to deal with general CSS issues. Try a dedicated CSS resource such as https://www.css-discuss.org/ instead. In the meantime, using Firefox with the Firebug add-on for this kind of CSS work.
https://getfirebug.com/

will do thanks.