Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • April 20, 2020 at 2:56 am #1205364
    fcp

    Hi,
    I added images in one of my mega menu, following Enfold documentation, but my images are not displayed at the same size.
    What do I need to do?
    You can find a link and credentials to my website in private content.
    Thanks a lot!

    April 21, 2020 at 2:36 pm #1205802
    Victoria

    Hey fcp,

    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

    
#header .avia_mega_div .avia_mega_menu_columns_last {
    padding-right: 14px;
}
#header .avia_mega_div .avia_mega_menu_columns_first {
    padding-left: 15px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 22, 2020 at 12:12 am #1205980
    fcp

    Hi Victoria,

    Thanks for your reply!

    I finally found another solution, trying to customize this mega menu and it solves the issues and does exactly what I want, using this code:

    #top #header #menu-item-2080 .avia_mega_div > .sub-menu.avia_mega_hr {
	padding: 10px!important;
}
#menu-item-2080 .sub-menu {
	padding: 10px!important;
}
#top #header #menu-item-2080 .avia_mega_div > .sub-menu > li {
	padding-left: 10px!important;
	padding-right: 10px!important;
	padding-top: 10px!important;
}

    I also disable the vertical lines using this code:

    #header .avia_mega_div .units {
    border-right-width: 0;
}

    But now I would like to do some customizations more:
    1) Disable the horizontal line
    2) Increase a little bit the padding between images and texts
    3) And add a zoom hover effect on images

    Could you help me on these points?

    Thanks a lot!

    April 23, 2020 at 5:40 pm #1206566
    Victoria

    Hi fcp,

    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

    
#top #header .avia_mega_div>.sub-menu.avia_mega_hr {
  border: none;
}
#header .mega_menu_title img {
  margin-bottom: 20px;
}

    3 is not really feasible.
    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 23, 2020 at 11:23 pm #1206709
    fcp

    Hi Victoria,
    Thanks a lot for your reply.
    Your code is working great!
    I’m really annoyed with the last step. Is there really no way to add animation to the images in mega menu? :-(

    April 24, 2020 at 3:52 am #1206720
    fcp

    I was making some tests and if I add a custom class to my submenus in the menu builder, after that I can apply some css to images on hover like this:

    .my-custom-class a:hover {
    padding-right:20px!important;
}

    and it works.
    So the only thing I would need is the css code to apply animations to images, like image zoom or image overlay…

    April 25, 2020 at 12:34 am #1207010
    fcp

    Hi again ;-)
    I’m now sooooooo close to achieve what I wanted!
    I only need one tiny little thing…
    If you could have a look to my menu in private content, I only need to hide overflow at the bottom of the images during animation.
    Could someone help me?
    Thanks a lot!

    April 29, 2020 at 2:05 am #1208051
    fcp

    Hi!
    Any help on this please? :-(
    Thanks a lot!

    April 29, 2020 at 5:42 pm #1208216
    Victoria

    Hi fcp,

    Best regards,
    Victoria

    April 30, 2020 at 2:04 pm #1208514
    fcp

    Hi Victoria,
    Thanks for your answer.
    I added a zoom on hover effect to images and if you try it, you can see that images overflow is hidden on top, left and right of the images, but not on their bottom. That is what I would need to resolve.
    Thanks a lot!

    May 4, 2020 at 4:52 pm #1209612
    Victoria

    Hi fcp,

    I tried to hide the overflow on many parent elements and on the image itself, it does not seem to work :|

    Best regards,
    Victoria

    May 5, 2020 at 2:48 am #1209778
    fcp

    Hi Victoria,

    I spent many hours on this but I finally found a solution to achieve what I wanted.
    But now I’m trying to do something more… Maybe you could help me for that ;-)

    I would like to add borders to images ONLY. I did it with some CSS but there is a problem: borders belong to the the image, so they disappear on hover.

    Do you have an idea?

    Thanks a lot! :-)

    May 15, 2020 at 1:06 pm #1213265
    Mike

    Hi,
    Sorry for the late reply, is the page in the Private Content area the correct one to see the images with a border that disappear on hover? If not please include a link to see the issue.

    Best regards,
    Mike

    May 19, 2020 at 7:26 pm #1214407
    fcp

    Hi Mike,
    You can see what I’m talking about on any page of my website.
    Indeed, this is in my main menu, when you go to the “NOS UNIVERS” submenu.
    Best regards.

    May 23, 2020 at 11:59 am #1215425
    Mike

    Hi,
    Sorry for the late reply, I believe that I understand now, please change your css from:

    #menu-item-2080 .sub-menu img {
    margin-bottom: -2px!important;
    border: solid 1px #cca752;
}

    to:

    #menu-item-2080 .sub-menu img {
    margin-bottom: -2px!important;
}
#menu-item-2080 .sub-menu a {
    border: solid 1px #cca752;
}

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    May 24, 2020 at 1:58 pm #1215751
    fcp

    Hi Mike,

    Thanks for your reply.
    I think I tried to apply this code before. With this, the border doesn’t move and it’s ok, but there is a border around titles and I don’t want it (see screenshot).

    How could I hide this?

    Thanks a lot!

    May 24, 2020 at 2:36 pm #1215771
    Mike

    Hi,
    Thank you for the feedback, please remove your border css and try this css instead:

    .avia_mega_div > .sub-menu li > span.mega_menu_title > a:nth-child(1) {
    border: solid 1px #cca752;
}

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    May 24, 2020 at 6:24 pm #1215850
    fcp

    Hi Mike,
    Your code works perfectly.
    You’re the best! ;-)
    Everything is ok for me now.
    Thanks a lot!!

    May 24, 2020 at 7:32 pm #1215861
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘Mega menu images size’ is closed to new replies.