-
AuthorPosts
-
July 15, 2019 at 11:45 am #1118736
Hi guys,
I got a little problem using Mega Menu’s in Enfold. The first Main Menu item folds out a Mega Menu, where I’ve inserted two clickable images. Originally, these were stacking on top of each other. By using a class and the float: left; , I managed to get them to stand next each other. But as you can see on the screenshot, they don’t aign horizontally.
I’ve been trying to correct this by testing display: inline; and other css-adjustments, but they don’t solve it. It seems like the imagelinks still go fullwidth of the Mega Menu, which causes the images to not align properly. How can I fix this?
Best regards,
AlexJuly 15, 2019 at 7:15 pm #1118901Hey RedRaphDK,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
#menu-item-1642 .hovedmenu-tilbud-rekl{ margin-top: -25px; }
If you need further assistance please let us know.
Best regards,
VictoriaJuly 16, 2019 at 9:12 am #1119093Hi Victoria,
Thank you for your reply, however, this only fixed part of the issue.
The position of the images are correct now, but if you hover over them in the mega menu, there is a white line across the images. It looks like it is caused by the links’ width, which is strecthing across the entire Mega Menu space. I can’t figure out why this is happening. Do you have a solution for this?
Best regards,
AlexJuly 16, 2019 at 6:45 pm #1119243Hi RedRaphDK,
Did you add some hove for the li elements?
Best regards,
VictoriaJuly 27, 2019 at 3:27 pm #1122328Hi Victoria,
Sorry for the late response, I got no mail about your reply,
Anyway, in answer to your question, I have not added any CSS to the li id’s. The only CSS I have in place to control the Mega Menu comes from other support-replies in this forum, and is as follows:
/* MEGA MENU STYLE – START */
.avia_mega_div {
width: 1000% !important;
right: -549% !important;
padding-left: 110% !important;
padding-top: 25% !important;
}.hovedmenu-tilbud-rekl {
display: inline!important;
float: left;
margin-right: 4%;
margin-bottom: 4%;
}#menu-item-1642 .hovedmenu-tilbud-rekl{
margin-top: -25px;
}
/* MEGA MENU STYLE – END */Best regards,
AlexJuly 31, 2019 at 7:14 pm #1123632Hi,
Is this shorted out?
Best regards,
BasilisJuly 31, 2019 at 9:47 pm #1123651Hi Basilis,
Please elaborate on the meaning of your question? I’m not sure what you’re asking? :-)
Best regards,
AlexAugust 3, 2019 at 6:52 pm #1124400Hi Alex,
Basilis was asking if the issue is sorted.
I think you need to wrap that code in the media query so that it does not affect mobile:
@media only screen and (min-width: 1024px) { /* Add your Desktop Styles here */ }
Best regards,
VictoriaAugust 30, 2019 at 6:30 pm #1132412Hi Victoria,
I have tried to use your suggestion to fix the issue, howver, it is not working.
I have made a screen recording of the issue to make it absolutely clear what the issue is, when you hover over the image links in the mega menu.
You can find a link to the video below.
I appreciate your assistance on this problem. :-)
BR,
AlexSeptember 4, 2019 at 11:28 am #1133777Hi RedRaphDK,
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaSeptember 5, 2019 at 9:06 am #1134244Hi Victoria,
You now have access to the website. Please check information in private content. :)
Best regards,
AlexSeptember 6, 2019 at 6:17 pm #1135043 -
AuthorPosts
- You must be logged in to reply to this topic.