Vertical navigation

Frameworks Bootstrap
1

Hi,

I am trying to set-up a vertical navigation system that will show all items when the display width is at least 992px and only collapse when smaller. Unfortunately, it seems that the collapsed ‘mode’ is the default for all sizes, I cannot get it to show all items on the larger sizes.

Can you help? I am using the latest version of Pinegrow with Bootstrap 4

This is the code I have been trying:

<main>
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-3"> 
                    <nav class="navbar navbar-light bg-light"> 
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler112" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> 
                            <span class="navbar-toggler-icon"></span> 
                        </button>                             
                        <div class="navbar-collapse collapse" id="navbarToggler112"> 
                            <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> 
                                <li class="nav-item active"> 
                                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
                                </li>                                     
                                <li class="nav-item"> 
                                    <a class="nav-link" href="#">Link</a> 
                                </li>                                     
                                <li class="nav-item"> 
                                    <a class="nav-link disabled" href="#">Disabled</a> 
                                </li>                                     
                                <li class="nav-item dropdown"> 
                                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                                    Dropdown link                                </a> 
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
                                        <a class="dropdown-item" href="#">Action</a> 
                                        <a class="dropdown-item" href="#">Another action</a> 
                                        <a class="dropdown-item" href="#">Something else here</a> 
                                    </div>                                         
                                </li>                                     
                            </ul>                                 
                            <form class="form-inline my-2 my-lg-0"> 
                                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> 
                                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>                                     
                            </form>                                 
                        </div>                             
                    </nav>
                </div>
                <div class="col-12 col-lg-9">
                    <h3>Column title</h3> 
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
                </div>
            </div>
        </div>
    </main>

Thank you.

Pascal