Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 21, 2018 at 11:03 pm #944985
    hazelallturf

    Hi,

    Please can you tell me how I can make my menu take up the entire screen when the user hovers over?

    I don’t want to see any of the page when the user is browsing the menu.

    Many thanks,

    April 23, 2018 at 7:49 pm #945512
    Basilis

    Hey hazelallturf,

    Can you please show us an example of what you mean, so we can see if it is something easy and quick where we can help you?

    Best regards,
    Basilis

    April 23, 2018 at 7:51 pm #945515
    hazelallturf

    Hi Basilis,

    The best example I can find is http://www.diy.com

    When you hover on one of their menus the full screen is taken to display.

    Look forward to your help.

    Thanks

    April 25, 2018 at 4:57 am #946376
    Ismael

    Hi,

    Thank you for the update. Try to adjust the height of the mega menu container base on the height of the browser view port.

    #menu-item-22 .avia_mega_div {
    height: 80vh;
}

    Best regards,
    Ismael

    April 25, 2018 at 10:12 am #946476
    hazelallturf

    Hi Ismael,

    That worked great. Can I also do the same to the width?

    Many thanks,

    Luke

    April 25, 2018 at 2:54 pm #946607
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    #top #header.av_minimal_header .avia_mega_div {
    width: 100vw!important;
    transform: translateX(-40px);
    height: calc(100vh - 80px);
}

    Best regards,
    Vinay

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