Question

182

Bootstrap menu is not collapsed by default in mobile view

rated 0 times [ 185] [ 3] / answers: 1 / hits: 15649 / 11 Years ago, tue, september 10, 2013, 12:00:00

I tried to implement a vertical navigation with twitter bootstrap 3.0 that collapses automatically.

The basics work (window size small = menu at the top like it should be), but the problem is that it is not collapsed as it is if I use the default navbar features in bootstrap.

<div class=container-fluid>



        <div class=row>

            <div class=navbar-brand>

                <a href=<g:createLink uri=/ absolute=true />>BABSI</a>

            </div>

            <button type=button class=btn navbar-btn data-toggle=collapse

                    data-target=#sidebar>TOOGLE



                    Toggle navigation

                    <span class=icon-bar></span> <span class=icon-bar></span> 

                    <span class=icon-bar></span>

                </button>

        </div>

        <div class=row>

            <header id=sidebar class=col-md-2 collapse>



                <div class=row>



                                    <!-- generates ul structure -->

                    <nav:primary class=nav navbar-inverse nav-stacked />

                </div>

            </header>

            <section id=content class=col-md-10>

                <div class=row></div>

                <div class=panel panel-default>

                    <div class=panel-heading>

                        <g:layoutTitle />

                    </div>

                    <div class=panel-body>

                        <g:layoutBody />

                    </div>

                </div>

            </section>

        </div>

    </div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

trayvon

Add To Favorites

Follow

Total Points: 35

Total Questions: 117

Total Answers: 88

Location: Guernsey

Member since Tue, Jul 6, 2021

3 Years ago

trayvon questions

1 Bootstrap modal UncaughtType Error on modal loading

Sun, Apr 24, 22, 00:00, 2 Years ago

1 Iterate through array of objects using javascript

Wed, Feb 9, 22, 00:00, 2 Years ago

1 Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058

Sun, May 23, 21, 00:00, 3 Years ago

1 Why could window scroll event not being fired

Tue, Jul 14, 20, 00:00, 4 Years ago

1 Error: Connecting to a SFTP server with ssh2-sftp-client in a AWS lambda function throws a time out

Thu, Jun 4, 20, 00:00, 4 Years ago

View All

answered 11 Years ago ervindouglasm · Accepted Answer

You need the .navbar-collapse class in your nav since that's the one that is set up to collapse at the given breakpoint.

I made some changes in your markup to accommodate that and also added a .navbar container so you can easily use the .navbar-toggle class on the button:

<div class=container>

    <div class=navbar navbar-default>

        <div class=navbar-brand> 

            <a href=#>BABSI</a>

        </div>

        <button type=button class=navbar-toggle data-toggle=collapse data-target=#sidebar .navbar-collapse> 

            <span class=icon-bar></span>  

            <span class=icon-bar></span>

            <span class=icon-bar></span>

        </button>

    </div>

    <div class=row>

        <header id=sidebar class=col-md-2>

            <div class=collapse navbar-collapse>

                <!-- generates ul structure -->

                <nav:primary class=nav navbar-inverse nav-stacked />

            </div>

        </header>

        <section id=content class=col-md-10>

            <div class=row></div>

            <div class=panel panel-default>

                <div class=panel-heading>

                    <g:layoutTitle />

                </div>

                <div class=panel-body>

                    <g:layoutBody />

                </div>

            </div>

        </section>

    </div>

</div>

To remove unwanted styles and since you're not using the default navbar-collapse structure you need to add this to your CSS

//remove background and border from navbar

.navbar-default{

    background: none;

    border: 0;

}

.navbar-collapse{

    padding: 0;

}



//override width:auto of navbar-collapse

@media (min-width:768px) {

    .navbar-collapse {

        width: 100%;

    }

}

Here's a demo fiddle with the changes