TechQA.

Linked Questions

Popular Questions

Navbar Toggler only in Portrait, not Landscape on mobile

Asked by At

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

css bootstrap-4
Original Q&A

1 Answers

0
Akber Iqbal On

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 768px

  • changing it to navbar-expand-lg would mean that full view (not the burger menu) gets displayed on any resolution over 992px

  • changing it to navbar-expand-xl would mean that full view (not the burger menu) gets displayed on any resolution over 1200px

  • you can check your phone's resolution in landscape mode and decide the appropriate class

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-xl bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>
<br>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
  <p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>

more information here

Related Questions