Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 8, 2014 at 4:39 pm #206873
    picnmix

    Hi,

    I have used images instead of titles in the enfold mega menu drop down and although all the images I uploaded are the same size they are being resized by the code to different sizes. I have four images in the menu, two are being displayed at 213px wide and two are displayed at 228px wide. Is there any simple fix I can use to get them all to display at the same width.

    The site can be viewed here:

    http://techfolio.me/wp02/

    many thanks, Jake

    January 8, 2014 at 8:40 pm #207050
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    #header .main_menu ul > li.menu-item > .avia_mega_div > .sub-menu > li.menu-item > span > img{
    width: 220px !important;
    max-width: 230px !important;
}

    Cheers! 
    Josue

    January 12, 2014 at 1:51 pm #208654
    picnmix

    Hi Josue,

    Thank you for your reply, I tried this before and it works fine when the browser is full width, but when I try shrinking the browser window the drop down navigation content gets cut off, as highlighted by the red dashed circle in the attached images.

    Is there a way I can make them resize, when being responsive. I guess I can do it with changing the width in media queries, but I was wondering what is your preferred method.

    thanks, Jake

    Mega Menu widths responsive browser

    Mega Menu widths full width browser

    January 13, 2014 at 4:49 pm #209029
    Yigit

    Hey!

    I have just checked your website and it seems like you have already figured it out! Please confirm so we can mark this thread as resolved.

    Best regards,
    Yigit

    January 20, 2014 at 2:59 pm #212223
    picnmix

    Hi Yigit,

    Sorry not to get back to you sooner.

    It seems that the images are different sizes in both chrome (which is the browser I am developing in) and Safari, but ok in IE and Firefox.
    Do you have any ideas what might be causing this issue in Chrome?

    many thanks,
    Jake

    January 20, 2014 at 3:43 pm #212258
    Yigit

    Hey!

    I previously checked your website in Chrome and now i checked once again but it looks fine when resizing the window. Please see screenshot here http://i.imgur.com/eAuclQa.jpg
    I am using version 32.0.1700.76 m

    Regards,
    Yigit

    January 20, 2014 at 4:34 pm #212305
    picnmix

    Hi Yigit,

    In the screenshot you sent to me, the image for , “short courses” and “care courses” is slightly shorter than the two images on the sides, and slightly smaller. I’d like all of the images to be the same size, it is only a sight difference I know, but would be great if they could all be the same.

    kind regards,

    jake

    January 21, 2014 at 8:55 pm #212950
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    #header .avia_mega_div .avia_mega_menu_columns_first {
padding-left: 15px;
}
#header .avia_mega_div .avia_mega_menu_columns_last {
padding-right: 15px; }
#top #header .avia_mega_div > .sub-menu { padding: 20px 10px 30px; }

    That should do it

    Cheers!
    Yigit

    January 23, 2014 at 12:02 pm #213793
    picnmix

    Hi Yigit,

    you’re a star! That worked a treat.

    Ahh I just noticed that it works in Chrome, Safari, even ie but not in Firefox strangely. In Firefox it still doesn’t scale the columns correctly but starts cutting off/hiding the far right column when the browser width is decreased.

    Not a huge priority though.

    Jake

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘MegaMenu Images different widths’ is closed to new replies.