0

I've yet to see a known-good way of using a different image between different nav menu elements, though I know there is a way to use one image as the consistent separator.

I have seven nav elements:

#menu-item-26{
}
//blue square here
#menu-item-25{
}  
//yellow square here
#menu-item-24{
}
//red square here
#menu-item-23{
}
//pink square here
#menu-item-22{
}
//green square here
#menu-item-21{
}
//purple square here
#menu-item-20{
}

And I've created 6 images in photoshop, essentially just 10px by 10px squares, each a different color. I want to use a different one between each set but I don't know if it would need to be used as a background image with each item and padding or if maybe there's another responsive-friendly way.

Geoff_S
  • 4,917
  • 7
  • 43
  • 133
  • 1
    Are the images just different coloured squares? – WizardCoder Jun 06 '17 at 16:18
  • 1
    maybe display:block or display: inline, depending on your desire – Gabri T Jun 06 '17 at 16:20
  • @WizardCoder yes, just different hex values – Geoff_S Jun 06 '17 at 16:24
  • 1
    @TomN. - Why not just use CSS for the colors? ... – Daniel Jun 06 '17 at 16:29
  • @Daniel I thought about that using height, width and color. How would I establish it as a separator though within my menu item ids? just use the hex code for 'Background" and then pad it? – Geoff_S Jun 06 '17 at 16:34
  • 1
    You'll either have to use `nth-child()`, `nth-of-type()` selectors or the CSS ID. If your menu has a selector you can do something like `#primary-menu li:before {}` to set all the repeated styles without having to use the menu IDs. When you need to have variation like you need, you typically can't get away without the solution being a bit tedious. Then padding it and use a negative value on the pseudo element to _"pull"_ it into the padded area. – hungerstar Jun 06 '17 at 16:38
  • 1
    @TomN. - You would use a class to set your dimensions of the separators. Then use id's to attach the colors. Although I would use classes there too, if your colors are theme-colors. – Daniel Jun 06 '17 at 16:40
  • Thanks guys, got it working perfectly now! – Geoff_S Jun 06 '17 at 17:12

2 Answers2

3

Maybe something like this, using :before selector and the content:""; style.

.fancy-separator li {
  list-style:none;
  float:left;
  margin-left:10px;
  padding-left:10px;
}
.fancy-separator > li:first-child {
  content:none;
  margin-left: 0;
}
.fancy-separator > li:before {
  content:"";
  width:10px;
  height:10px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  left: -10px;

}
.fancy-separator > li:nth-child(2)::before {
  background: blue;
}
.fancy-separator > li:nth-child(3)::before {
  background: yellow;
}
.fancy-separator > li:nth-child(4)::before {
  background: red;
}
.fancy-separator a {
 text-decoration:none;
}
<ul class="fancy-separator">
  <li><a href="#">home</a></li>
  <li><a href="#">about</a></li>
  <li><a href="#">news</a></li>
  <li><a href="#">contact</a></li>
<ul>
WizardCoder
  • 3,353
  • 9
  • 20
2

You have a lot of options available to you. You can use an element to place the image, I would start with <img> unless you have a good reason not to. Though you can use it as a background image too. Simply use background-position to place it on the element and provided a little extra padding for the background image to reside in.

Here's a couple options.

Using an Element <img>

body {
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: inline-block;
}

li img {
  padding: 0.25rem;
  vertical-align: middle;
}
<ul>
  <li><img src="http://placehold.it/10x10/fc0"><a href="#">One</a></li>
  <li><img src="http://placehold.it/10x10/"><a href="#">Two</a></li>
  <li><img src="http://placehold.it/10x10/fc0"><a href="#">Three</a></li>
  <li><img src="http://placehold.it/10x10/"><a href="#">Four</a></li>
  <li><img src="http://placehold.it/10x10/fc0"><a href="#">Five</a></li>
</ul>

Using as Background Image

body {
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: inline-block;
}

li {
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  background-position: left center;
  background-repeat: no-repeat;
}

li:nth-child(odd) {
  background-image: url( 'http://placehold.it/10x10/fc0' );
}
li:nth-child(even) {
  background-image: url( 'http://placehold.it/10x10' );
}
<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li><a href="#">Five</a></li>
</ul>

--- Edit ---

After seeing an answer to a comment above. Since your images are actually a solid color you can use elements with a background color to reduce network requests and simplify maintenance and flexibility of application.

Using Elements Instead of Images

body {
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li,
i {
  display: inline-block;
}

li i {
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

li:nth-child(odd) i {
  background-color: gold;
}
li:nth-child(even) i {
  background-color: lightgray;
}
<ul>
  <li><i></i><a href="#">One</a></li>
  <li><i></i><a href="#">Two</a></li>
  <li><i></i><a href="#">Three</a></li>
  <li><i></i><a href="#">Four</a></li>
  <li><i></i><a href="#">Five</a></li>
</ul>

You could also use a pseudo element instead of an actual element like above.

Using Pseudo Elements Instead of Images

body {
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: inline-block;
  padding: 0 0.5rem;
}

li:before {
  content: '';
  display: inline-block;
  position: relative;
  left: -0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  vertical-align: middle;
}

li:nth-child(odd):before {
  background-color: gold;
}
li:nth-child(even):before {
  background-color: lightgray;
}
<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li><a href="#">Five</a></li>
</ul>
hungerstar
  • 21,206
  • 6
  • 50
  • 59