Solved

Images in mega menu keeps repeating themselves

cliniquenatalie
Visitor
2 0 2

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);

}

 

 

Screenshot 2024-03-24 at 13.25.02.png

 

 

Accepted Solution (1)

Keshan97
Shopify Partner
55 9 21

This is an 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!

Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email

View solution in original post

Replies 3 (3)

deepaksharma
Shopify Partner
443 61 90

Hi there @cliniquenatalie 

 

I would like to help you here

 

Can you share your store url and password if any?

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com

Keshan97
Shopify Partner
55 9 21

This is an 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!

Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email
cliniquenatalie
Visitor
2 0 2

That worked! Thank you so so much 🙂