I'm trying to modify the Joomla menu module, so that I can put divider images between every list item. The thing is, that I don't want these to appear in the sub-menu's. How can I filter out what is in a sub menu and what is not?

Say I want it to be like, echo it if it's in the main menu only, not in the sub menu's that appear as a list underneath it. Because when I filter it on "deeper", it only filters it on 1 specific item, and then keeps placing it underneath the other submenu items.

3 Answers 3


You can achieve this using pure CSS using the greater than symbol > (immediate children selector) and the :after pseudo-element.

Here's a quick example based on the default Joomla 3 and the Protostar template (I know you're using Joomla 2.5, but it should work. If not, please post some of your HTML/CSS code.)

ul.menu > li { /* Add some space between menu items for image */
   padding-right: 10px; /* Change to your image width */
ul.menu > li:after { /* Target immediate children of <ul> with class "menu" */
   content: "";
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   width: 10px; /* Change to your image width */
   height: 40px; /* Change to your image height */
   background: url('path/to/image.jpg') no-repeat; /* Place your image URL here */
ul.menu > li:last-child:after { /* Remove the image for the last menu item*/
   display: none;

I don't know how your current menu structure is, whether it's the default Joomla menu, or whether you're using an extension, however I will give you a very basic example which you should find easy to apply to your menu.

So lets say you have the following HTML markup for your menu:

<ul class="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
        <span class="drop">Item 4</span>
        <ul class="submenu">
            <li>Item 4.1</li>
            <li>Item 4.2</li>
            <li>Item 4.3</li>

You could use the following CSS to add your divider to each main menu item

.menu li {
    border-left: 1px solid #000;
.menu li:first-child,
.menu li .submenu li {
    border-left: none;

This will remove the add a left border to the menu item, apart from the first item and the submenu items.

Hope this helps

  • This is a functionality I've already added. I'm modifying the default menu. Thanks for your response. However, I'm trying to add images in between the items--user defined images. Thing is, when I add a li, it takes the width of the other li's, and I can't seem to overrule that. on top of that, it refuses to filter out the submenu's...
    – Hocho
    Commented Nov 11, 2014 at 14:08
  • 1
    In which case, please add your menu HTML markup to your question so we can take a look
    – Lodder
    Commented Nov 11, 2014 at 14:08
  • 1
    The sub menu thing can be filtered out using > between elements, but I'd have to see your site to know for sure how that would be structured. As far as putting it between the items and the images, again I'd have to see your structure, but it CAN still be done with css usually.
    – Brian Peat
    Commented Nov 11, 2014 at 17:00

If you are trying to modify core mod_menu then you should override default.php and put your image on line 102.

  • There's only 83 lines there ...
    – Hocho
    Commented Nov 11, 2014 at 14:05

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.