Mega Menu Background Image

if you have more than one mega-div and you want different background-images on them you have to select them by there menu-item-id
which comes as an id in front of those rules:

#top #wrap_all .avia_mega_div {
  background-image: url(https://your-image-url.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

#top #wrap_all .avia_mega_div *  {
    background: transparent !important;
}

#top #wrap_all .avia_mega_div ul li > a:hover {
    background-color: #900 !important;
    color: #fff
}

the last rule is only to have a hover state for the sub-menu items

__________________________________________________________________

as mentioned above if you want different images on more than one mega-div this will be a specific example with menu-item-id:

#top #wrap_all #menu-item-3529 .avia_mega_div {
  background-image: url(https://your-image-url.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

or i see now that the top-level menus got an index on the menu-items f.e.: menu-item-top-level-5
so specific rule could be:

#top #wrap_all .menu-item-top-level-5 .avia_mega_div {
  background-image: url(https://your-image-url.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

you can see the result here on “testpages” Menuitem : https://webers-testseite.de/

• This reply was modified 5 years, 1 month ago by Guenni007.