0

I have two different menu's that I want to show based if they are on

  • phone, tablets landscape
  • phone, tablets landscape portrait
  • desktop

I want to do it in javascript and not CSS. So far I have:

//For tablets/phones in landscape if (window.matchMedia("(orientation: landscape)").matches) { return ( <MegaMenuContainer provider={provider}/> ); } //for desktop else if (width > 768){ return ( <MegaMenuContainerDesktop provider={provider}/> ); } //for tablets/phones in portrait else { return ( <MegaMenuContainer provider={provider}/> ); }

Problem is that in the code in the first IF statement, it will be true for tablets as I want it to be. Problem is that it will ALSO be true when people uses a desktop in landscape (which is true in most cases) and the mobile menu will be shown. Any help?

Improve this question
2
  • Please search before posting. More on searching here. Commented Apr 24, 2019 at 12:26
  • A lot of these code I have in the example is from a search I have found on this site. I could only find solutions for landscape/portrait detection but not for device or how to embedd this with desktop alternative. Commented Apr 24, 2019 at 12:29
Load 6 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.