Different colored square bullet on every navigation item

[lmorales]

My site is up at mmp.power1.com. I want to change the menu so that each menu item has a different colored square bullet on it. How do I accomplish that?

[AndrewGSW]

.mainnav li {
	float: left;
	position: relative;
	z-index: 999;
	height: 20px;
	line-height: 20px;
	margin-right: 20px;
	list-style-image:url(images/square.png);
}

.mainnav li:nth-child(2) {
      list-style-image:url(images/square2.png);
}   /* etc..  OR */

.mainnav li:nth-child(2n+2) {
      list-style-image:url(images/square2.png);
}   /* Every second element etc.. */

This is CSS3 so is flakey (flawed?) in IE. Otherwise you could apply class names to the individual li elements and apply image-bullets to the classes.

[VIPStephan]

No need for “flakey” CSS 3. And no need for background images. Here’s a better way, based on Andrew’s code (we’re disregarding IE 7 and below anyway):

.mainnav li {
  position: relative;
  padding-left: 15px;
}
.mainnav li:before {
  content: "";
  border: 5px solid;
  position: absolute;
  left: 0;
  top: 5px; /* change that to your desire */
}
.mainnav li:first-child:before {border-color: red;}
.mainnav li:first-child + li:before {border-color: green;}
.mainnav li:first-child + li + li:before {border-color: yellow;}
.mainnav li:first-child + li + li + li:before {border-color: blue;}
…
…

You can achieve the same effect with assigning a height and width and background color to the generated content rather than using borders.

[lmorales]

Ok, would I have to call the classed within my ul nav? My biggest issue is this whole things in php and Im not sure where the heck the list is.

[AndrewGSW]

That's sensible, seeing as we only want squares anyway

I suppose background-image can be used in place of border-color, if an image is required..

[VIPStephan]

Originally Posted by lmorales

Ok, would I have to call the classed within my ul nav? My biggest issue is this whole things in php and Im not sure where the heck the list is.

You can find your list easily by looking at the output source code (view source in browser or using a debugging tool that’s usually built into the browser already). And your menu code looks like this:

<ul id="menu-left" class="mainnav superfish">
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a title="Mega My Pixel" href="index.php">HOME</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a title="behind the lens" href="http://mmp.power1.com/?page_id=7">BEHIND THE LENS</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a title="buzz" href="http://mmp.power1.com/?page_id=17">BUZZ</a></li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a title="clientele" href="http://mmp.power1.com/?page_id=19">CLIENTELE</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a href="http://http://http://mmp.power1.com/?page_id=28">BUY MY ART</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="http://mmp.power1.com/?page_id=23">CONNECT</a></li>
<li id="menu-item-32" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-32"><a href="http://mmp.power1.com/?page_id=21">LOGIN</a></li>
</ul>

And there we see that there are already IDs and classes so you don’t need all these sibling selectors I posted, you can address the elements directly via the IDs.

[lmorales]

Thanks!!

[lmorales]

So that worked for the bullets... but they are all showing up as white?

[VIPStephan]

Yeah, of course you need to assign a border color, otherwise it takes the default text color which is white in this case. If you need a different color for each list item use:

#menu-item-11:before {border-color: red;}
#menu-item-12:before {border-color: green;}
#menu-item-13:before {border-color: blue;}

Or use the method with the sibling selectors I demonstrated earlier if you can’t be sure that the IDs will always be like that (e. g. if you add/remove or change the order of pages).

[lmorales]

o.o i think i just broke my website... I checked to see if it was the footer doing it, its not, checked the main menu css which i dont think it is, Ive only been tinkering with the main menu css, style css and footer.php.... Im wondering how i broke it.