Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #1343414

    Hi there!

    I found this:
    /* Icon before title */

    .av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-title:before {
    font-family: ‘entypo-fontello’;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    .av-catalogue-container.my-custom-catalogue .av-catalogue-list li .av-catalogue-title {
    padding-left: 30px;

    in the documentation and it totally worked great. However, I’m using the icon to demonstrate which menu items are vegetarian so want the icon only on specific menu items.

    Can you tell me how to assign them per item? For instance, under Burritos, I just want the first menu item to have the leaf, not all the menu items listed on top.

    This reply has been marked as private.


    Thank you for the inquiry.

    You can use the nth-child selector to target a specific item in the list.


    .av-catalogue-container.my-custom-catalogue .av-catalogue-list li:nth-child(1) .av-catalogue-title:before {
        color: red;

    As you may noticed we used the nth-child(1) selector, which should target the first item in the list. For more info about child selectors, please check this article.

    // https://css-tricks.com/almanac/selectors/n/nth-child/
    // https://css-tricks.com/useful-nth-child-recipies/

    Best regards,

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.