Add Class To Menu And Submenu Items

[cedric_charles]

Hello,

 

I would like to add a small icon to subcategories in PrestaShop submenu.

 

For this (if you have another solution, I'm interested), I'll just target each item and add its icon in CSS. I would like to add a class like "cat-15" (15 is the id of the category) to "li". Unfortunately I can"t find how the menu items are created...

 

Thank you in advance,

Cédric

[presta.show]

Which menu do you mean? Submit a screenshot.

[cedric_charles]

Here is is ! It's the default navigation of Prestashop. I have a level 1 item "Mode grossesse" which is a category. On hover, you can see the sub categories. I would like to add an icon to the sub categories.

 

https://space.zeo.net/g/4egtd/W64BRNGEVMDON3DWRMMILXVSE7STQTXD

 

Thank you in advance,

Cédric

[presta.show]

You can use css :before like this:

.navigation_class ul li:before {
    content: url('../your_icon.png');
}

[cedric_charles]

Thank you Kalifsoup.

 

But I need a different icon depending on the subcategory. So I need to add unique ID on each item to identify them and than add the icon with CSS depending on that ID...

[presta.show]

If it's default prestashop theme, you should look at file:
/thmes/default-bootstrap/modules/blocktopmenu/blocktopmenu.tpl

[cedric_charles]

The problem is that in this .tpl, the sub categories items are create like that :

	<div id="block_top_menu" class="sf-contener">
		<div class="cat-title">{l s="Menu" mod="blocktopmenu"}</div>
		<ul class="sf-menu clearfix menu-content">
			{$MENU}
		</ul>
	</div>

How can I alter the {$MENU} ?

[Rhobur]

I think a jquery script to check each item and then attach a class may be the solution.

[presta.show]

If you want edit <li> elements you must edit file /modules/blocktopmenu/blocktopmenu.php