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 enter image description here

Default template's in mobile with vertically stacked menu enter image description here

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

I think you're going to have to add a rough Photoshopped image of what you are looking for as it is not clear. Do you want to completely replace the top (black) banner? Should the menu items remain vertically stacked? — mccannf, Aug 11 '14 at 09:13
@mccannf yes vertically stacked menu items. The default asp.net MVC template shows this functionality with the menu items in the top black bar. I want these items to be replaced with the side menu items.away from desk I'll try to find a example — Tim, Aug 11 '14 at 10:55
http://startbootstrap.com has the default look I want to modify. Resize the browser and when it huts mobile the menu items are available as a full width vertical stack menu.I want this menu replaced with my side menu items. Above the main content of the page. Hope this makes sense. — Tim, Aug 11 '14 at 11:01
Still not clear :(. Is something like this what you're looking for? http://www.bootply.com/3p4W9wStYQ — mccannf, Aug 11 '14 at 16:07
This has be asked before and answered: http://stackoverflow.com/a/20864689/1004312 — Christina, Aug 11 '14 at 20:50
@BootstrapThemer that not the same question or answer(its effectively the opposite). I asking for a sidemenu which becomes a fullwidth vertically stacked menu. (replacing the top black menu) The question asks for a sidemenu which appears on mobile. — Tim, Aug 12 '14 at 05:22
@mccannf Ive added some images which i hope make it clearer. — Tim, Aug 12 '14 at 05:34
@mccannf that example is almost a solution, however i want the top black menu bar as in my example with its own menu items which disappear and are replaced as per your example — Tim, Aug 12 '14 at 06:42
@Tim - updated based on your comments: http://www.bootply.com/Pni3xpOjEi — mccannf, Aug 12 '14 at 16:29
@mccannf that looks like what I am looking for, I had a feeling that i would need to use jQuery and couldn't use the inbuilt bootstrap JavaScript. If you want to put this as an answer i can mark it as complete.The only difference i can see thus far is i need to change the left hand menu to be as in my example i.e white background whilst not in mobile view. — Tim, Aug 12 '14 at 19:55

score 2 · Accepted Answer · answered Aug 12 '14 at 20:11

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

your Bootply is unaccessible currently is it the right link?http://www.bootply.com/Pni3xpOjEi — Tim, Aug 13 '14 at 07:21
Bootply makes things easier! a great menu bar for a best site structure and perfomance. thanks a lot @mccannf — PatsonLeaner, Jul 11 '18 at 07:38

bootstrap responsive sidemenu

1 Answers1