Docs

[donavoncade]

Hi, I’m trying to add a background image to a mega menu on my site. I used the css code found in this other thread here: https://community.theme.co/forums/topic/images-in-the-mega-menu/
It works well except for it applies to every mega menu on the site. Is there a way to make each background image specific to only one mega menu?

Thanks!

[Prasant Rai]

Hello There,

Thanks for writing in!

You can take advantage of page id to target mega menus. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[donavoncade]

Hi,

Sorry for the delay. The URL of my site is https://newdirectionfamilylaw.com.

Thanks 🙂

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

li#menu-item-234 > ul {
    background: url("add image URL here") no-repeat center center;
}
li#menu-item-66 > ul {
    background: url("add image URL here") no-repeat center center;
}

Hope that helps.

[donavoncade]

That does help! I modified it just a bit. Posting here just in case it helps someone else.

@media (min-width: 980px) {
  //about menu
  li#menu-item-66 > ul {
    background-image: url("add image URL here");
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 25%;
  }
 //services menu
 li#menu-item-234 > ul {
    background-image: url("add image URL here");
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 25%;
  }
}

[Christian]

You’re welcome and thanks for sharing.

[Author]

Posts