CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Andy
Andy

Reputation: 5395

Left sidebar with toggle in Bootstrap 3 not working

I'm trying to adapt a Bootstrap template shown here https://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle so that it includes a top navbar and a footer.

My application needs the left sidebar to be the full height of the page (minus the top navbar and footer) and for the content area to scroll.

I've created a fiddle to show what I've got so far here: https://jsfiddle.net/y9khea25/1/

The problem I'm having is that the button to toggle the sidebar, #menu-toggle, goes to the left and outside the viewport when main has the .active class removed (i.e. when the left sidebar is "collapsed"). This means that the user can't re-open the sidebar.

I have adapted the markup from what was in the original Bootsnip. Part of this means that what they had originally inside .page-content-wrapper is now inside main which then uses Bootstrap's .col classes. I don't know if this is causing a separate problem?

<main class="active">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar" role="navigation">

                <a id="menu-toggle" href="#"><span class="glyphicon glyphicon-align-justify"></span></a></li>

                <ul>
                    <li>item 1</li>
                </ul>
            </div>

            <div class="content col-xs-12 col-sm-9 col-md-10">
            <!-- page content -->
            </div>
    </div>
</main>

Upvotes: 1

Views: 3363

Answers (1)

Andrei Todorut
Andrei Todorut

Reputation: 4526

The problem is that the hamburger menu has to remain in the visible part of the screen. In the right of your red sidebar.

https://jsfiddle.net/y9khea25/5/

HTML

...
<a id="menu-toggle" class="pull-right" href="#"><span class="glyphicon glyphicon-align-justify"></span></a></li>
...

CSS

.pull-right {
    float: right;
}

Upvotes: 2

Related Questions