Elementor Hover Nav Menu Changes Background Image

No extra plug-ins required! Elementor Pro Required!

Using Elementor, here is how to change the column or section background image upon hovering different menu items.

Working examples:

Changing the Adjacent Column's Background Image

Changing the Section's Background Image

To begin with, create your nav menu element in a two column section

If you want the option to change the adjacent column's background image.

To change the section background image, create it in a section with the amount of columns you want. Or, it can also be an inner section.

Then, give the nav menu element the appropriate class name

Here are the needed class names:

To change the column background: ' navswitcher '

To change the section background: ' navswitchers '

Now, add an HTML element on the same page

It doesn't really matter where on the page the HTML Element is added...

Elementor Close PopUp on Click for Menu & Same Page Links
left element

Add the right code to the html element, and edit the links to your own background images

Important: the first background image link will be automatically linked with the first menu item, and so on. Add a link for every item.

Code for changing the column background image:

<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {

//Edit the background images links HERE

//default image
var defaultLink = 'https://elementorcodes.b-cdn.net/wp-content/uploads/2019/08/phonesticky.png';

//image while hovering menu items
var links = [
'https://elementorcodes.b-cdn.net/wp-content/uploads/2019/08/phonesticky.png',
'https://elementorcodes.b-cdn.net/wp-content/uploads/2019/08/phonestickys.png',
'https://elementorcodes.b-cdn.net/wp-content/uploads/2019/08/phonestick.png',
'https://elementorcodes.b-cdn.net/wp-content/uploads/2019/08/phonestickys.jpg'
];


/* Don't modivy the code below */

var switchers = document.querySelectorAll('.navswitcher > div > nav.elementor-nav-menu--main > ul > li');
var Column = document.querySelector('.navswitcher').closest('.elementor-column');
var rColumn;
function getRColumn(){
if(Column.nextElementSibling){
rColumn = Column.nextElementSibling.firstElementChild;
}
else if(Column.previousElementSibling){
rColumn = Column.previousElementSibling.firstElementChild;
}
};
getRColumn();

// get parent element background styles
var backgroundPosition = window.getComputedStyle(rColumn, null).getPropertyValue('background-position');
var backgroundRepeat = window.getComputedStyle(rColumn, null).getPropertyValue('background-repeat');
var backgroundSize = window.getComputedStyle(rColumn, null).getPropertyValue('background-size');

// add block with background
links.map(function(link, index) {
rColumn.insertAdjacentElement('beforeend', createElement(link));
})
// add default block

rColumn.insertAdjacentElement('beforeend',createElement(defaultLink, 'active default'));

var element = document.querySelectorAll('.navswitcher-background');

var _loope = function _loope(i) {
switchers[i].addEventListener('mouseover', function () {
rColumn.style.backgroundImage = 'url(' + links[i] + ')';
resetBackground()
element[i].classList.add('active');

});
switchers[i].addEventListener('mouseleave', function () {
resetBackground()
document.querySelector(".navswitcher-background.default").classList.add('active');
});
}
function resetBackground() {
var blocks = document.querySelectorAll('.navswitcher-background');
for (i = 0; i < blocks.length; i++){
blocks[i].classList.remove('active');
}
}
function createElement(link, className) {
var obj = document.createElement('div');
obj.className = "navswitcher-background " + className || '';
obj.style.backgroundSize = backgroundSize;
obj.style.backgroundPosition = backgroundPosition;
obj.style.backgroundRepeat = backgroundRepeat;
obj.style.backgroundImage = 'url(' + link + ')';
return obj;
}
for (var i = 0; i < switchers.length; i++) {
_loope(i);
}
});

</script>


<style>
.navswitcher-background{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0.4s cubic-bezier(.25,.98,.73,.73);
}

.navswitcher-background.active {
opacity: 1;
}
</style>

Code for changing the section background image:

<script>
document.addEventListener('DOMContentLoaded', function () {

//Edit the background images links HERE

//default image
var defaultLink = 'https://elementorcodes.b-cdn.net/wp-content/uploads/2019/09/nature.jpg';


//image while hovering menu items
var links = [
'https://elementorcodes.b-cdn.net/wp-content/uploads/2019/08/arbre.jpg',
'https://elementorcodes.b-cdn.net/wp-content/uploads/2019/08/forest.jpg',
'https://elementorcodes.b-cdn.net/wp-content/uploads/2019/08/womanseetext.jpg',
'https://elementorcodes.b-cdn.net/wp-content/uploads/2019/09/mountain.jpg'
];


/* Don't modivy the code below */

var switchers = document.querySelectorAll('.navswitchers > div > nav.elementor-nav-menu--main > ul > li');
var rSection = document.querySelector('.navswitchers').closest('section.elementor-element');


// get parent element background styles
var backgroundPosition = window.getComputedStyle(rSection, null).getPropertyValue('background-position');
var backgroundRepeat = window.getComputedStyle(rSection, null).getPropertyValue('background-repeat');
var backgroundSize = window.getComputedStyle(rSection, null).getPropertyValue('background-size');

// add block with background
links.map(function(link, index) {
rSection.insertAdjacentElement('beforeend', createElement(link));
})
// add default block

rSection.insertAdjacentElement('beforeend',createElement(defaultLink, 'active default'));

var _loope = function _loope(i) {
switchers[i].addEventListener('mouseover', function () {
resetBackground();
rSection.style.backgroundImage = 'url(' + links[i] + ')';
document.querySelectorAll('.navswitchers-background')[i].classList.add('active');
});
switchers[i].addEventListener('mouseleave', function () {
resetBackground();
document.querySelector(".navswitchers-background.default").classList.add('active');
});
}
function resetBackground() {
var blocks = document.querySelectorAll('.navswitchers-background');
for (i = 0; i < blocks.length; i++){
blocks[i].classList.remove('active');
}
}
function createElement(link, className) {
var obj = document.createElement('div');
obj.className = "navswitchers-background " + className || '';
obj.style.backgroundSize = backgroundSize;
obj.style.backgroundPosition = backgroundPosition;
obj.style.backgroundRepeat = backgroundRepeat;
obj.style.backgroundImage = 'url(' + link + ')';
return obj;
}

for (var i = 0; i < switchers.length; i++) {
_loope(i);
}
});
</script>
<style>
.navswitchers-background {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0.4s ;
}
.navswitchers-background.active {
opacity: 1;
}
/* change the background-color of the menu items here */

div.navswitchers > div > nav > ul{
background-color: #00000059;
}
</style>

Finally, enjoy the awesome design!

Et voila! Thanks for reading!
Let me know if you need help!

< News >

Enjoyed this tutorial? Get more awesome designs, right in your inbox!

No spam, not more than one weekly email.

< Elements Finder>

Quickly search across all the main Elementor Addons.

< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>