Choose layout by viewport

[graphicz]

Mega menu shows 8 top level sections plus 'More...'

In mobile I would like the mega menu to show all the top level sections in the dropdown.

I have altered the Mega Menu Layout to show all the sections and not show the more, but the functionality of the mega menu depends on toggling css 'show' and 'hise' so I cannot use this to switch layouts.

Is javascript the best solution for this and how can I call the different layouts depending on viewport?

Thank you

If I try and post the layout I get: Forbidden

You don't have permission to access /newthread.php on this server.

[KieranSD]

If I try and post the layout I get: Forbidden

You don't have permission to access /newthread.php on this server.

I have the same problem..
Paste it in a txt file and attach or JsFiddle/Codepen although any Software Variables will flag errors

Just a quick thought you could duplicate the layout and create the Mobile/Tablet version of the layout and wrap it in a tag with a class for example <div class="mob-only"></div> and only allow that to appear on mobile using standard media queries. Although this isn't very intuitive and clogs up the DOM a little bit.

[graphicz]

Hi Kieran

Standard media queries won't work for maga menu as the normal 'mobile only' css is something like:

@media screen and (min-width:801px){
.overeight {}
.undereight {display:none;}
}
@media screen and (max-width:800px){
.overeight {display:none;}
.undereight {}
}

But the functionality of the mega menu in mobile depends on toggling display none/block for the +/- dropdown, so if you put it it in a dislay none div it doesn't work! Believe me!
Hence needing a js way to swithch between the two MegaMenu layouts:

Here is the layout without the More...https://www.webeg.co.uk/layout-without-the-more.txt