8

Is there a way to hide the separator in the first element on each line?

I have a responsive horizontal menu that adds extra lines when the window becomes smaller.

To make matters worse, the end user can add and remove items from this menu, or just change the order of the menu items.

Using first-child is not an option, because that only works for the first line. When the screen becomes too small the following lines will have the separator on their first li element.

#block-views-solutions-block{ 
  box-sizing: border-box; 
  text-transform: uppercase; 
  font-weight: bold; 
  width: 92%; 
  max-width: $maxWidth; 
  margin: 20px auto 0 auto; 
  padding: 15px 0 0 0; 
  background-color: $colorBlue;  
  .content{ 
    box-sizing: border-box;
    width: 100%; 
    overflow: hidden;
  }
  ul{ 
    margin: 0 !important; 
    padding: 0 40px; 
    text-align: center; 
  }
  li{ 
    display: inline-block; 
    padding: 0 !important;
    &:before { 
      position: relative; 
      top: 0.125em; 
      display: inline-block; 
      width: 1px; 
      height: 1em; 
      border-left: solid 2px #fff; 
      content: " "; 
    }
    &:first-child{
      &:before{ border-left: none; }
    }
  }
  a{ 
    display: inline-block; 
    padding: 0 10px; 
    color: #fff; 
    text-decoration: none;
    &:hover { 
      text-decoration: underline;
    }
  }
  h2{ 
    color: #fff;
    font-size: smaller; 
    padding-bottom: 5px;
  }
}

Looks fine here:

enter image description here

Does not work for the 2nd or following lines:

enter image description here

Looks horrible on very small screens:

enter image description here

I've been trying out solutions on here and other websites, but none seem to do the trick.

Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
  • you could wrap each separator in a a 'div' or 'a' tag, assign a class to these tags, then you could use @media queries to hide them at the point the menu bar flips to horizontal. – daniel aagentah Nov 07 '16 at 12:49
  • From a designer perspective, never have more than 1 rule of multiple menu items. You should start the responsive menu like in the thrid image some earlier, and set all the seperators on `display:none` – Saypontigohe Nov 07 '16 at 12:49
  • You could use @media queries to use another stylesheet for different sizes – xale94 Nov 07 '16 at 12:49
  • 1
    not sure if I can use @media queries, since the end user can add/remove items from this menu or change the order, so the point at which the layout changes might change too, I'm quite new to sass –  Nov 07 '16 at 12:52
  • 1
    I came as far as this. https://jsfiddle.net/MrLister/rnetqub2/ Not sure if there is a real solution though. – Mr Lister Nov 07 '16 at 13:53
  • nice idea, unfortunately doesn't work when you center the text :( –  Nov 07 '16 at 15:32

1 Answers1

4

I found a solution to this issue, with a couple of caveats:

  • The solution requires that the list be left- or right-aligned, and won't work with a centered list.
  • The solution requires that the ul element's overflow be hidden, which could pose a problem if you're also hoping to have dropdown menus.

The solution itself is very simple:

  • Use ::before or ::after to add the separator, depending on whether your nav is left- or right-aligned.
  • Position the separator relative to its initial position such that it sits outside its list item.
  • Use padding on the opposite side of the list item to create the space for its adjacent list item's separator.
  • Set overflow: hidden; on the ul element so that any separators which fall outside the container are hidden.

Here it is in action:

ul {
  font-size: 0;
  overflow: hidden;
  padding: 0;
}

li {
  font-size: 16px;
  display: inline-block;
  margin: 0;
  padding: 0;
  color: gray;
  position: relative;
  padding-right: 2rem;
}

li::before {
  content: "|";
  position: relative;
  left: -1rem;
  font-weight: bold;
  color: black;
}
<ul>
  <li>Item 1</li>
  <li>Another Item</li>
  <li>This Is Nice</li>
  <li>Another</li>
  <li>And Another</li>
  <li>And Yet Another</li>
</ul>
Nathan Arthur
  • 8,287
  • 7
  • 55
  • 80