1

I'm trying to use the offcanvas row to create a slide-in side menu for a mobile device.

I would like the menu to have a fixed position so that it will occupy the entire length of the screen in both small and larger screens. It's a bit tricky to play with position:fixed because the whole structure seems to fall apart when I do so. I use the following structure

<div class="container">
    <div class="row row-offcanvas row-offcanvas-left">
        <!-- sidebar -->
        <div class="col-sm-3 col-lg-2 col-xs-6 sidebar-offcanvas" id="sidebar" role="navigation">
             <!-- menu left content -->
        </div>

        <!-- main right col -->
        <div class="col-sm-9 col-lg-10 col-xs-12" id="main">

           <div class="navbar navbar-inverse navbar-main navbar-static-top collapse-group" role="navigation" id="mobile-main-nav">
               <div class="collapse in no-ani">
                    <div class="nav-buttons">
                        <button type="button" class="btn btn-success icn-only visible-xs pull-left offcanvas-toggle" data-toggle="offcanvas"><i class="icon-th"></i></button>
                        <!--- top menu content --->
                    </div>
                </div>
            </div>

            <div class="row navbar-top-padding">
                <div class="col-md-12 page" id="col3">

                <!--- main content --->
                </div>
            </div>
        </div>          
    </div>
</div>

With the following LESS styles

    @media screen and (max-width: @screen-xs-max) {

        /*
         * Off Canvas
         * --------------------------------------------------
         */
        .row-offcanvas {
            position: relative;
            -webkit-transition: all .2s ease-out;
            -moz-transition: all .2s ease-out;
            transition: all .2s ease-out;
            left:0;//necessary to make the animation work

        }

        .row-offcanvas-right .sidebar-offcanvas {
            right: -87%; /* 6 columns */
        }

        .row-offcanvas-left .sidebar-offcanvas {
            left: -87%; /* 6 columns */
        }

        .row-offcanvas-right.active {
            right: 87%; /* 6 columns */
        }

        .row-offcanvas-left.active {
            left: 87%; /* 6 columns */
        }

        .sidebar-offcanvas {
            position: absolute;
            top: 0;
            width: 87%; /* 6 columns */
        }

    }
4

0 回答 0