Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 9, 2014 at 6:30 pm #289148
    Cliffy

    Hi guys, hope someone can help.

    I have a pretty standard install. I’m not much of a techie either so please go easy on me.
    I need to create a menu for the whole of the United Kingdom and have managed to break it down into 12 basic areas. I created a Mega Menu for it (seems the only way).
    However, I am working on a display of 1920 x 1080 and everything seemed fine. But when I view it on my laptop (1366 x 768) the bottom part is off the screen and I have no way of pressing the menu items. Not sure what it would look like on older PCs.

    Can someone suggest how I can re-format the mega menu to work better and fit all the items?

    I see the menu has an option for new row but not new column – that might have worked (but limited to 6 columns it seems)

    Thanks,
    H

    July 9, 2014 at 6:31 pm #289149
    Cliffy

    Oh I put a link with a screenshot but can’t see it above. http://s175.photobucket.com/user/heathcliffe2000/media/EnfoldMegaMenuhelpneeded_zpsa22e697b.jpg.html

    July 10, 2014 at 5:33 am #289321
    Ismael

    Hi!

    Thank you for using the theme.

    You can decrease the height of the mega menu links. Please try this on Quick CSS or custom.css:

    #top .av-main-nav ul a {
width: 100%;
line-height: 15px;
padding: 8px 15px;
font-size: 12px;
min-height: 15px;
}

.avia_mega_div .avia-bullet {
left: 3px;
top: -3px;
}

    Cheers!
    Ismael

    July 10, 2014 at 9:21 pm #289725
    Cliffy

    Thanks Ismael,

    That is really useful and I think it will work for my current test. However there is a lot of “white space” between the 1st line of 6 and the second. Is there a way to reduce this gap also?

    Many thanks,
    H

    July 11, 2014 at 2:39 pm #290099
    Yigit

    Hey!

    Can you post the link to your website so we can inspect elements on it to provide you more accurate custom CSS code?

    Best regards,
    Yigit

    July 11, 2014 at 4:50 pm #290182
    Cliffy
    This reply has been marked as private.
    July 14, 2014 at 4:39 pm #291134
    Yigit

    Hey!

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

    #top #header .avia_mega_div > .sub-menu { padding: 10px 30px 15px; }
#top #header .avia_mega_div > .sub-menu.avia_mega_hr { padding-top: 15px; }

    Regards,
    Yigit

    July 15, 2014 at 12:17 am #291319
    Cliffy

    Excellent!

    Thanks so much Yigit :)

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Mega Menu too big for all but large screens’ is closed to new replies.