Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 31, 2016 at 4:34 pm #706277
    Pappasdg

    Hello,

    I am trying to setup a mega menu. I would like the background of the mega menu to be 100% of the window and keep the links inside the container. Like they have on https://www.progressive.com/ under their Insurance dropdown etc.

    Would that be possible?

    Thanks!

    October 31, 2016 at 5:51 pm #706353
    Jordan

    Hey Pappasdg,

    Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Jordan

    October 31, 2016 at 7:39 pm #706437
    Pappasdg

    Sure

    November 2, 2016 at 3:45 pm #707172
    Andy

    Hi,

    try this code inside Quick CSS field:

    .avia_mega_div {
width: 817% !important;
right: -549% !important;
}

    and adjust as needed. Hope this helps!

    Best regards,
    Andy

    November 3, 2016 at 3:39 pm #707780
    Pappasdg

    Hey Andy,

    Tried it out however its not working. It’s still not 100% width of the window.

    Thanks,

    November 4, 2016 at 3:17 pm #708213
    Andy

    Hi,

    as far as I can see it, it got much better. So now you just need to adjust the values in my code, until you’re happy.

    Best regards,
    Andy

    March 20, 2017 at 4:45 pm #763691
    iclo

    Hi there

    I’d like the same full width mega menu as requested by @Pappasdg on my blog. Adjusting the values in the code provided by @Andy seems to work but will it be full width on a different screen resolution as well?

    Merci :)

    • This reply was modified 8 years, 8 months ago by iclo.
    March 21, 2017 at 6:52 am #764025
    Rikard

    Hi,

    I think it should be yes, what screen resolutions did you check it on?

    Best regards,
    Rikard

    March 24, 2017 at 8:00 am #765973
    iclo

    Hi @Rikard!

    Well first of all I have troubles to find the exact size to fit my own screen resolution (1440px). Then, I realize it’s not responsive…

    Merci :)

    March 27, 2017 at 11:13 am #767334
    Andy

    Hi,

    you need to play with different values in my code and if you want to have different results on different screen sizes then you need to add some media queries as well:

    @media only screen and (max-width: 767px) {
.avia_mega_div {
width: 817% !important;
right: -549% !important;
}}

    For more information about media queries: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Best regards,
    Andy

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