![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: background, mega menu, styling
-
AuthorPosts
-
May 30, 2019 at 9:14 pm #1105497
Is it possible to set a background image (like a watermark) to be visible for an entire Mega Menu? Or to use an image as a mega menu background?
This would mean making each of the li inside the mega menu have a transparent background. Is this possible?
See the image for an example: https://pasteboard.co/Ih8pjrF.pngJune 1, 2019 at 8:44 am #1106014Hey nickydef,
It might be possible with some custom CSS, but we would have to see the element in question in order to give you something to try out.
Best regards,
RikardJune 1, 2019 at 9:25 am #1106019if 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, 3 months ago by
Guenni007.
June 2, 2019 at 4:37 am #1106251 -
This reply was modified 5 years, 3 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.