Home>Support>Masthead Image Change Based on Hovering Over Menu Items

Masthead Image Change Based on Hovering Over Menu Items

By jnknight, 9 years ago. Last reply by Andrew Misplon, 9 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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 6 months ago jnknight

    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. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More