I'm trying to make a responsive website with Bootstrap 4. On my phone the menu gets expanded in Landscape which distorts it. How can I force the menu to stay collapsed in Landscape orientation?
I already uploaded 90% of the page when I realized the Issue. I tried to work around it by creating a Menu Collapsed by default and one expanded by default. Then Hiding one or the other depending on the media query. This breaks the menu completely. Also trying to reverse engineer the code with web inspector and then trying to add that to my mobile media queries failed as well. In fact whenever I try to override the Bootstrap media query with my own it gets ignored. I am using the bootstrap css, my mobile.css with the media queries for different phones and design.css for custom classes and ids. Check the Website so you can see the Problem: lightflashproductions.com
Your navigation element has the class
navbar-expand-sm
...changing it to
navbar-expand-md
would mean that full view (not the burger menu) gets displayed on any resolution over 768pxchanging it to
navbar-expand-lg
would mean that full view (not the burger menu) gets displayed on any resolution over 992pxchanging it to
navbar-expand-xl
would mean that full view (not the burger menu) gets displayed on any resolution over 1200pxmore information here