Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 27, 2016 at 5:07 am #572574
    mborland

    Hi Kriesi… love Enfold, great theme. I’m using the Mega Menu function for drop-down sub menus. See this screenshot: http://www.lovelearnings.com/ll2.png

    On Safari and Chrome, the height of the images in the drop-down menu varies across the columns (although all images have the same dimensions). Oddly, images are the same size in FireFox. I want to force all the images in the drop-down menu to have the same height.

    It also looks as though the drop-down menu columns are also different widths – I’d like to force all columns to be the same width (ie. 25% for each of the 4 columns).

    In summary, I’m seeking CSS code to: a.) Force the drop-down menu columns to have equal width and height; and b.) Force consistent dimensions for images in the mega menu drop-downs.

    Thanks in advance.

    January 27, 2016 at 11:03 am #572734
    mborland

    Please disregard/close this thread, issue has been resolved.

    January 28, 2016 at 5:56 am #573493
    Ismael

    Hi!

    Thank you for using Enfold and glad that you solve the issue. It looks the same on safari, chrome and firefox. If you want to add a minimum height to the images inside the mega menu, you can use this: 

    #header .mega_menu_title img {
    min-height: 135px;
}

    Regards,
    Ismael

    February 5, 2016 at 6:04 pm #578643
    thespecter

    Hi Kriesi team,

    i have exactly the same problem as described in the first post. By adding die quick css – the bug seems to be fixed, but this workaround only works for big screens. When you resize your browser window, the bug comes up again.

    It also seems that the max-width doesn’t work for firefox (can’t check IE/Edge here).

    Greetz and thx for your job so far.
    Simon

    February 9, 2016 at 10:10 pm #580612
    Andy

    Hey!

    I can’t see any issue on your website. However, you could try to add some media queries to Ismael’s code:

    @media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) {
#header .mega_menu_title img {
    min-height: 135px;
}}

    Adjust min-width and max-width value as needed.

    Regards,
    Andy

    February 10, 2016 at 2:25 pm #581136
    thespecter

    Hey Andy,

    thanks for your response. As is wrote you have to resize the browser window.
    In full screen everything looks fine. Please see the files attached in private content.

    Greetz Simon

    February 11, 2016 at 12:23 pm #581565
    Andy

    Hi!

    Thanks for the screenshots. Use this code to control sub menu’s width: 

    #header .twelve.units {
width: 734px; 
}

    and maybe you need to include the media queries from my previous code.

    Let me know if that helps.

    Best regards,
    Andy

    February 17, 2016 at 4:07 pm #584799
    thespecter

    Thanks for your response. When I insert the code the mega menu is’t displayed correct any more – in any browser.
    I also do not understand how a fix width should solve the probleme. The overlay from the mega menu is “liquid”, isn’t it?

    #header .twelve.units {
width: 734px; 
}

    Greetz Simon

    February 17, 2016 at 4:11 pm #584803
    Andy

    Hi!

    well as I already said you might need to include media queries into this code, like for example: 

    @media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) {
#header .twelve.units {
width: 734px; 
}}

    Adjust screen size (max-width, min-width) as needed.

    Regards,
    Andy

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.