bootstrap responsive sidemenu

Question

I've been trying to get my site which has a sidemenu to override the normal functionality for the top menu when mobile view is operated.

i.e. i want the menuitems to be full width.

<div class="col-md3 pull-left">
            <div class="bs-sidebar hidden-print affix-top" id="sidemenu">
                <ul class="nav bs-sidenav">
                    <li class="nav-header">
                        <a data-toggle="collapse" data-parent="#sidemenu" href="#Admincontainer" class=""><span>Admin</span><i class=" pull-right glyphicon glyphicon-chevron-down"></i></a>


                        <ul style="list-style-type: none; margin-left:10px" id="Admincontainer" class="nav collapse ">

                            <li class="">
                                <a href="lnk" title="">
                                    Manage Members
                                    <i class=" glyphicon glyphicon-chevron-right pull-right">
                                    </i>
                                </a>
                            </li>
                            <li>
                                <a href="/Admin/Member/addnew" title="">
                                    Add A New Member
                                    <i class=" glyphicon glyphicon-chevron-right pull-right">
                                    </i>
                                </a>
                            </li>

                        </ul>
                    </li>
                    <li class="nav-header">
                        <a data-toggle="collapse" data-parent="#sidemenu" href="#Publiccontainer" class=""><span>Committee</span><i class=" pull-right glyphicon glyphicon-chevron-down"></i></a>
                        <ul style="list-style-type: none; margin-left:10px" id="Publiccontainer" class="nav collapse ">
                            <li>
                                <a href="/Public" title="">
                                    Home
                                    <i class=" glyphicon glyphicon-chevron-right pull-right">
                                    </i>
                                </a>
                            </li>
                            <li>
                                <a href="/Public/Contact" title="">
                                    Contact Us
                                    <i class=" glyphicon glyphicon-chevron-right pull-right">
                                    </i>
                                </a>
                            </li>
                        </ul>
                    </li>
            </div>
        </div>

I've tried and failed with a few approaches so ive created a "vanilla" template of how my menu looks before i try and "fix" it. I basically want the sidemenu to become that fullwidth top menu when the viewport becomes too small to accommodate both sidemenu and main content side by side.

I've hacked an example from a default bootstrap template below.

jsbin example

Default template

Default template's in mobile with vertically stacked menu

Example showing the sidemenu i want to replace the vertically stacked menu in previous image.

Solution

You need two navbars (one at the top and one at the side) and then use JQuery to move the side navbar to the top of the page.

So if you have two navbars like so:

<div class="navbar navbar-inverse navbar-fixed-top ">
    <div class="container ">
        <div class="navbar-header ">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
                <span class="icon-bar "></span>
                <span class="icon-bar "></span>
                <span class="icon-bar "></span>
            </button>
            <a class="navbar-brand " href="/ ">Application name</a>
        </div>
        <div id="topmenu" class="navbar-collapse collapse ">
            <ul class="nav navbar-nav ">
                <li>
                    <a href="/ ">Home</a>
                </li>
                <li>
                    <a href="/Home/About ">About</a>
                </li>
                <li>
                    <a href="/Home/Contact ">Contact</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right ">
                <li>
                    <a href="/Account/Register " id="registerLink ">Register</a>
                </li>
                <li>
                    <a href="/Account/Login " id="loginLink ">Log in</a>
                </li>
            </ul>

        </div>
    </div>
</div>
<div id="navbar" class="navbar navbar-inverse navbar-fixed-top">
      <ul class="nav nav-stacked" id="menu-bar">
        <li class="panel dropdown">
          <a data-toggle="collapse" data-parent="#menu-bar" href="#collapseOne">
              Admin
          </a>
          <ul id="collapseOne" class="panel-collapse collapse">
            <li><a href="#">Manage Members</a></li>
            <li><a href="#">Add a new Member</a></li>
          </ul>
        </li>  
        <li class="panel dropdown">
          <a data-toggle="collapse" data-parent="#menu-bar" href="#collapseTwo">
              Committee
            </a>
          <ul id="collapseTwo" class="panel-collapse collapse">
            <li><a href="#">Home</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </li>     
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
<div class="clearfix"></div>
<div class="content">
<div class="container bodycontent">
   <div class="jumbotron">
      <h1>Testing Responsive sidemenu</h1>
      <p class="lead">Trying to get my side menu to replace the top menu when the size goes too small.
      </p>
   </div>
   <div class="row">
     <div class="col-md-12">
       <div class="row">
         <article>
          <h1>Content</h1>
          <p>Content here</p>
        </article>
       </div>
     </div>
   </div>
 </div>
</div>

The JQuery is as follows:

var $window = $(window),
    $html = $('#menu-bar');

$window.resize(function resize(){
  if ($window.width() < 768) {
    // When the side bar is moved to the top, this stops it being fixed in place
    $("#navbar").removeClass('navbar-fixed-top');
    return $html.removeClass('nav-stacked');
  }
  $("#navbar").addClass('navbar-fixed-top');
  $html.addClass('nav-stacked');
}).trigger('resize');

And CSS:

/* CSS used here will be applied after bootstrap.css */
@media (max-width: 767px) {
    .content {
        padding: 15px;
        margin-top: 10px;
    }
}
@media (min-width: 768px) {

    #menu-bar .panel {
    margin-bottom: 0;
    background-color: rgba(0,0,0,0);
    border: none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    }

    #menu-bar li a {
        color: #fff;
        font-size: 16px;
        font-weight: bold;
    }

    #navbar {
        float: left;
        width: 200px;
        height: 100%;
    }

    .content {
        margin-left: 200px;
        min-height: 100%;
        margin-top: 60px;
    }

    .container {
        margin-left: 10px;
        padding-right: 150px;
    }

}
.navbar-brand > h3 {
   margin-top: 0;
   margin-bottom: 0;
}
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}
#navbar {
   margin-top: 50px
}

If you want the left hand side bar to have certain CSS, you should specify the CSS like so:

@media (min-width: 768px) {

    #menu-bar {
        /* Put your CSS here. It will not apply to the menu-bar when it moves to the top */
    }

}

Bootply here

Comments

[Tim]

your Bootply is unaccessible currently is it the right link?bootply.com/Pni3xpOjEi

[PatsonLeaner]

Bootply makes things easier! a great menu bar for a best site structure and perfomance. thanks a lot @mccannf