Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #1205364

    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!

    #1205802

    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

    #1205980

    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!

    #1206566

    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

    #1206709

    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? :-(

    #1206720

    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…

    #1207010

    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!

    #1208051

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

    #1208216

    Hi fcp,

    Best regards,
    Victoria

    #1208514

    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!

    #1209612

    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

    #1209778

    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! :-)

    #1213265

    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

    #1214407

    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.

    #1215425

    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

    #1215751

    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!

    #1215771

    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

    #1215850

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

    #1215861

    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

Viewing 19 posts - 1 through 19 (of 19 total)

The topic ‘Mega menu images size’ is closed to new replies.