- This topic has 7 replies, 3 voices, and was last updated 3 years, 2 months ago by
.
-
Posts
-
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 */
Customer Support
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/w1yUvyPbvmpoWhen 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!
Customer Support
Hi there,
in your CSS remove the
marginproperties 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!
- You must be logged in to reply to this topic.
