This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Masthead Image Change Based on Hovering Over Menu Items

Resolved 2 replies premiumthemetheme-vantage
jnknight
10 years ago · Last reply by Andrew Misplon 10 years ago

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!

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

2
  1. jnknight 10 years, 11 months ago

    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>
  2. Andrew Misplon Staff 10 years, 11 months ago

    Hi jnknight

    Really glad to hear you were able to resolve. Thanks for sharing your solution with everyone.

    All the best.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread