Archived topic
Mega menu (6 columns + images) - Problem about 'Change image on hovering'
7 replies · Started by Juan Carlos Lopo on January 28, 2023
Hi there! I have a problem. I have created a 6 column menu with images that works perfectly, but I can't use the 'Change image on hovering' option provided by Generate Press because it messes up the whole menu formatting. Below this text I have copied my code. Can you help me to fix it so that when I hover over the image it just changes without moving from its original position? By the way, I've tried several things and found out the hovered image has a strange 'margin left= -400px'. Does it makes sense at all? When I fixed it, then the hovered image shows up below the first image so the final result is even worse.
Thanks in advance!!!
/* MENU PRINCIPAL */
@media (min-width: 769px) {
nav .main-nav .mega-menu {
position: static;
}
nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
left: 0 !important;
}
nav .main-nav .mega-menu > ul > li > a {
font-weight: 400;
padding-left:20px;
padding-right: 20px;
font-size: 11px;
letter-spacing: 3px;
}
nav .main-nav .mega-menu>ul>li {
display: inline-block;
width: 16.6%;
vertical-align: top;
}
nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
width: 50%;
}
nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
width: 33.3333%;
}
nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
width: 20%;
}
nav .main-nav .mega-menu > ul > li:hover > a,
nav .main-nav .mega-menu > ul > li:focus > a,
nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
nav .main-nav .mega-menu ul ul {
background-color: transparent !important;
color: #d0c1b1;
}
nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
width: 100%;
box-shadow: 0 0 0;
left: 0;
height: auto;
}
nav .main-nav .mega-menu ul.toggled-on .sub-menu {
pointer-events: auto;
}
nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
}
@media (max-width: 769px) {
.menu-image-title-below.menu-image-not-hovered > img, .menu-image-hovered.menu-image-title-below .menu-image-hover-wrapper, .menu-image-title-below .menu-image-hover-wrapper {
display: none;
}}
/* FIN MENU PRINCIPAL */
Hi Juan,
Did you forget to link us to your site?
Sorry, Ying! https://www.bronzeymora.com
;)
Do you mean this part?
https://www.screencast.com/t/w1yUvyPbvmpo
When I hover over the images, they don't change to another image.
How can I see the issue?
Btw the site looks nice :)
Thanks for your kind words Ying! Indeed, I disabled the 'Change image on mouseover' option because I didn't want the menu to appear too cluttered for the client. Now I have re-enabled this option, but, to make it more 'presentable', I have written the following code:
img.hovered-image {
opacity: 0;
transition: opacity 0.25s ease-in-out 0s;
margin-left: 0px !important;
margin-top: -210px !important;
}
The problem continue as, depending on the screen width, the hovered image changes its vertical position so the final result looks a bit messy.
I look forward to your reply!
Thanks again for your commitment!!!
Cheers!
Hi there,
in your CSS remove the margin properties to create the overlap.
So they will stack one on top of the other.
Then add this CSS:
.menu-image-hover-wrapper {
display: grid !important;
}
.menu-image-hover-wrapper img {
grid-column: 1/-1;
grid-row: 1/-1;
}That will place the two images exactly on top of each other and both will resize identically.
Many many thanks for your solution, David!!! It worked!!!!! However, I had to keep the left margin property (maybe I changed something before, who knows...). The thing is that now everything works fine regardless of the screen width. Thanks for your super fast support and for everything!!! Hugs!!!!
Glad to hear that!