3

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

https://gist.github.com/anonymous/1a1460cf195c058d180d

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 Jun 11 '14 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 Jun 11 '14 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 Jun 11 '14 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 Jun 11 '14 at 15:21
5

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.

3

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

i.e.

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

instead of

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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