Bootstrap burger nav menu (full screen)

Question

Here is some code on boot ply:

What I want to do, is instead of the burger menu appearing when you resize the window, I want a full screen version for the menu, that has the same effect but is for non mobile screens. It seems as though the burger menu only gets activated on mobile devices. How can I do this? Thanks

Do you want to use Full screen menu on Desktop and burger menu on mobile devices ? — vivekkupadhyay, Sep 01 '15 at 11:55
What have you already tried? Please include your code in the question as well. — Roope, Sep 01 '15 at 12:05
Possible duplicate of: http://stackoverflow.com/questions/21860263/bootstrap-3-show-collapsed-navigation-for-all-screen-sizes — Thomas, Sep 01 '15 at 15:08

score 0 · Answer 1 · answered Sep 02 '15 at 05:37

You have to use media queries and change the defaults to expose the navbar-toggle class at a larger viewport. Change the media query width to whatever you need.

.navbar.custom-navbar .fa {
  font-size: 25px
}
@media (max-width: 2500px) {
  .custom-navbar .navbar-header {
    float: none;
  }
  .custom-navbar .navbar-left,
  .custom-navbar .navbar-right {
    float: none !important;
  }
  .custom-navbar .navbar-toggle {
    display: block;
  }
  .custom-navbar .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .custom-navbar.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .custom-navbar .navbar-collapse.collapse {
    display: none!important;
  }
  .custom-navbar .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .custom-navbar .navbar-nav>li {
    float: none;
  }
  .custom-navbar .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .custom-navbar .collapse.in {
    display: block !important;
  }
  .custom-navbar .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top custom-navbar" role="navigation">
  <div class="container-fluid">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

    </button>
    <div class="navbar-header"> <a class="navbar-brand" rel="home" href="#" title="Help">
        Brand
      </a>

    </div>
    <div class="navbar-collapse collapse" id="navbar-collapse-1">
      <!-- Non-collapsing right-side icons -->
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>

        </li>
        <li><a href="#">About</a>

        </li>
        <li><a href="#">Contact</a>

        </li>
        <li>
          <a href="#" class="fa fa-cog"></a>

        </li>
        <li>
          <a href="#" class="fa fa-home"></a>

        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
  <!--/.container -->
</nav>

Thanks, there seems to be two problems with this. When I press a menu item button, the menu does not collapse automatically, it stays open. Also, can I add additional buttons to the left hand side of the burger menu? — user3754111, Sep 02 '15 at 10:45
In the example I provided the issue with the menu collapsing doesn't happen and you can create another div to expose links outside the collapsed navbar if you need to. — vanburen, Sep 02 '15 at 14:41

Bootstrap burger nav menu (full screen)

1 Answers1