Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Mar 2011
    Posts
    215
    Thanks
    10
    Thanked 1 Time in 1 Post

    Different colored square bullet on every navigation item

    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?

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    .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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    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):

    Code:
    .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.

  • Users who have thanked VIPStephan for this post:

    AndrewGSW (08-06-2012)

  • #4
    Regular Coder
    Join Date
    Mar 2011
    Posts
    215
    Thanks
    10
    Thanked 1 Time in 1 Post
    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.

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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..
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    Quote Originally Posted by lmorales View Post
    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:
    Code:
    <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.

  • #7
    Regular Coder
    Join Date
    Mar 2011
    Posts
    215
    Thanks
    10
    Thanked 1 Time in 1 Post
    Thanks!!

  • #8
    Regular Coder
    Join Date
    Mar 2011
    Posts
    215
    Thanks
    10
    Thanked 1 Time in 1 Post
    So that worked for the bullets... but they are all showing up as white?

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,777
    Thanks
    6
    Thanked 1,021 Times in 994 Posts
    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:
    Code:
    #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).

  • #10
    Regular Coder
    Join Date
    Mar 2011
    Posts
    215
    Thanks
    10
    Thanked 1 Time in 1 Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •