Announcement

Collapse
No announcement yet.

Choose layout by viewport

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Choose layout by viewport

    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.
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    #2
    Originally posted by graphicz View Post
    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.

    Kieran Smith
    eCommerce Developer
    Sellerdeck

    Comment


      #3
      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
      Jonathan Chappell
      Website Designer
      SellerDeck Website Designer
      Actinic to SellerDeck upgrades
      Graphicz Limited - www.graphicz.co.uk

      Comment

      Working...
      X