How to force hamburger menu in Bootstrap 3.3.7 even for Desktop?

user_196032 0
Viewed 2615

My code looks the same as this page:

https://getbootstrap.com/docs/3.3/examples/navbar/

When I open the page in mobile, it looks like this:

enter image description here

But when I open it on Desktop, it looks like this:

enter image description here

How can I force the page to look the same on Desktop as it does on Mobile?

i.e. I want a hamburger menu on the desktop version of the site.

Things I have tried

twitter-bootstrap-3 twitter-bootstrap
2 Answers

From Bootstrap documentation:

Changing the collapsed mobile navbar breakpoint

The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

you can use this customization tool to customize the breakpoint and compile it or just edit variables.less

@grid-float-breakpoint:   YOUR-BREAK-POINT
user_86984260

Here's a css-only example. Full credit to the original author.

HTML

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <div class="navbar-header navbar-right">
        <p class="navbar-text">
        <a href="#" class="navbar-link">Username</a>
        </p>
    </div>
  </div>
</nav>

CSS

body {
    padding-top:70px;
}

.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
}
.navbar-nav>li {
  float: none;
}
.navbar-collapse.collapse.in{
  display:block !important;
}
user_49676940
Related