Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Is there any way to change (or overlay another image on) the Masthead background image when a menu item is being hovered over? If not, what about having a different Masthead background image for each page?
Thanks!
I was able to get this accomplished. First, I found this thread: Thread: Different Masthead Images / Background Images. That helped with getting different masthead images based on the page-id.
I continued to look for other ways to accomplish changing the masthead image when hovering over the menu items. I finally learned that CSS was not going to help with this and dove into jQuery. Just in case someone else would like to pull this off, the jQuery outline is below:
<script type="text/javascript"> jQuery(function($){ var $header = $('header'); $('#menu-item-#').hover(function(){ $header.css('background-image', 'url(" --url to image-- ")') }, function() { $header.css('background-image', '') }) }); </script>Hi jnknight
Really glad to hear you were able to resolve. Thanks for sharing your solution with everyone.
All the best.