Okay, this is a sweet set of styles for making any navigation centered and 100% width, using a justify trick.


Works no problem in codepen, or a flatfile. It does NOT work on a Joomla install. This blows my noodle, how is that even possible? That's like the color red not working. Can anyone think of why it would fail on Joomla, or how exactly I could get it to work?

The More information requested:

We use our own custom template. We have a template we call 'base' with all our code in less, compiling to the css. If I use this, removing all ul styles and all body styles, it still doesn't work. I can remove bootstrap, it doesn't make a difference.

New Information: I've done this two ways - totally works in a Joomla Article. Totally doesn't work with a Joomla Menu uls. I've used the exact same code, put them side by side, but piping it through the menu module breaks it. That is completely weird. There is no visible difference between the two. When I copy the menu UL and move it into the article, as is, it doesn't work. When I remove the class="item-#" off the li, it doesn't work. This is mind blowing. They are identical!!!

  • 1
    CSS = Cascading Style Sheets, my guess is that it's the C in CSS that's causing your problem.
    – Craig
    Commented Jun 11, 2014 at 2:26
  • That's an LESS file, not a CSS file. Does your theme support LESS compiling? If not, that could be why it doesn't work.
    – Brian Peat
    Commented Jun 11, 2014 at 2:35
  • 2
    Can you add more informations? Like which template you use and the exact CSS rules you are adding and how you add it? As said already the gist shows LESS code which isn't going to work on your site unless you compile it into CSS first. It's likely a conflict with the template CSS but with the information given it's not possible to tell.
    – Bakual
    Commented Jun 11, 2014 at 11:43
  • okay, don't get focused on the less / css thing, we've been using less in our joomla for 2 years. I've stripped everything that can apply to the ul, li and body.
    – Faye
    Commented Jun 11, 2014 at 15:21

2 Answers 2


It's because your trick relies on the inline-block property. When you apply inline-block then html whitespace appears as space between those elements, because inline elements have letterspacing.

If there is no html whitespace, as in the output of mod_menu, then your inlined blocks won't have that letterspace, and neither will your pseudo-element.


I've solved this. It's the fact that Joomla menu lists the code in line.



instead of


Well, there goes that idea. Thanks for playing everyone.

Amendment: We've discovered that putting a space between each li, so

<li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li>

will fix it.

  • Seen... how do we explain such differences? Commented Jun 11, 2014 at 17:24
  • I don't understand your question?
    – Faye
    Commented Jun 11, 2014 at 18:22
  • Yes, sorry: how does a single space or newline in html makes such difference? Typical thing I couldn't answer to... Commented Jun 12, 2014 at 8:58
  • 2
    I think Seth's answer to the question kind of explains that.
    – Faye
    Commented Jun 12, 2014 at 15:56
  • 1
    Using an override, I've added a space after each menu item li, and it now works. Yay!
    – Faye
    Commented Jun 12, 2014 at 22:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.