Images in mega menu keeps repeating themselves

[cliniquenatalie]

Hi. I need to remove the repeating images. I only want them for my top menuitems. Not for the "grandchildren" if that makes sense. I only want the images on the top. 

Can someone help?

This is the code I added to the base. css

#MegaMenu-Content-2 li:before {
content: '';
width: 100%;
height: 90px;
display: block;
background-size: cover;
background-repeat: no-repeat;
}
#MegaMenu-Content-2 li:nth-child(1):before {
background-image: url(https://cdn.shopify.com/s/files/1/0582/8965/1843/files/picture1.jpg?v=1711208125);

}

#MegaMenu-Content-2 li:nth-child(2):before {
background-image: url(https://cdn.shopify.com/s/files/1/0582/8965/1843/files/picture2.jpg?v=1711208125);

}

#MegaMenu-Content-2 li:nth-child(3):before {
background-image: url(https://cdn.shopify.com/s/files/1/0582/8965/1843/files/picture3.jpg?v=1711208125.jpeg);

}

#MegaMenu-Content-2 li:nth-child(4):before {
background-image: url(https://cdn.shopify.com/s/files/1/0582/8965/1843/files/picture4.jpg?v=1711208125);

}

#MegaMenu-Content-2 li:nth-child(5):before {
background-image: url(https://cdn.shopify.com/s/files/1/0582/8965/1843/files/picture5.jpg?v=1711208125);

}

 

[Anonymous]

Hi there @cliniquenatalie 

I would like to help you here

Can you share your store url and password if any?

[Keshan97 · Accepted solution]

Hello! It sounds like you've got a good setup going with your mega menu, but you're encountering a common issue where styles intended for top-level menu items are also being applied to sub-menu items ("grandchildren"). The CSS you've added is applying the :before pseudo-element to all li elements under #MegaMenu-Content-2, which includes those deeper in the hierarchy.

To ensure that the images only appear for the top-level menu items and not the sub-menu items, you'll need to modify your CSS selector to target only the first level of li elements within #MegaMenu-Content-2. One way to achieve this is by specifying that the styles should only apply to li elements that are direct children of the ul or ol that is a direct child of #MegaMenu-Content-2. Here's how you can do it:

#MegaMenu-Content-2 > ul > li:before {
    content: '';
    width: 100%;
    height: 90px;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
}

#MegaMenu-Content-2 > ul > li:nth-child(1):before {
    background-image: url('https://cdn.shopify.com/s/files/1/0582/8965/1843/files/picture1.jpg?v=1711208125');
}

#MegaMenu-Content-2 > ul > li:nth-child(2):before {
    background-image: url('https://cdn.shopify.com/s/files/1/0582/8965/1843/files/picture2.jpg?v=1711208125');
}

#MegaMenu-Content-2 > ul > li:nth-child(3):before {
    background-image: url('https://cdn.shopify.com/s/files/1/0582/8965/1843/files/picture3.jpg?v=1711208125.jpeg');
}

#MegaMenu-Content-2 > ul > li:nth-child(4):before {
    background-image: url('https://cdn.shopify.com/s/files/1/0582/8965/1843/files/picture4.jpg?v=1711208125');
}

#MegaMenu-Content-2 > ul > li:nth-child(5):before {
    background-image: url('https://cdn.shopify.com/s/files/1/0582/8965/1843/files/picture5.jpg?v=1711208125');
}

By using > (the child combinator), this CSS targets only li elements that are direct children of the ul directly inside #MegaMenu-Content-2, excluding any nested ul or li elements further down the hierarchy.

This change should solve your issue by ensuring that only the top-level items have the background images, as intended. If your menu structure uses a different setup or if you encounter any other issues, please don't hesitate to ask for further assistance!

[cliniquenatalie]

That worked! Thank you so so much 🙂