Bootstrap Vertical Menu Not Collapsing

Question

I can't get a bootstrap vertical menu to collapse when using media queries.

There is too much code to put it all in here so I created a fiddle -

https://jsfiddle.net/DTcHh/

I don't mind re-writing the menu however it was the only way I could get this kind of menu. I am basing my technology off this website as this was the clients demand -

http://www.rhiwbeinaprm.co.uk/

I am trying to create their home page menu but in bootstrap so it is responsive. any help is greatly appreciated.

<div class="navbar">
        <nav class="navbar navbar-default">
<div class="container-fluid"><div class="collapse navbar-collapse navbar-ex1-collapse">
 <ul class="nav navbar-nav">
   <li class="root">
        </li><li class="dropdown-submenu"> <a tabindex="-1" href="#">Welcome</a>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">Headteacher</a>
              </li>
              <li><a tabindex="-1" href="#">School Motto</a>
              </li>
          </ul>
      </li>
   </ul>
 </div>
</div

The issue is, when scrolling below around 750px and below, the whole thing just disappears.

Answer 1

Where is the navigation button?

Add an id to: <div class="navbar-collapse collapse">

    <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Bootstrap 3</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
    ...
    </div>

Update fiddle: https://jsfiddle.net/wZVanG/DTcHh/8623/

Answer 2

you have the following issues with your code:

• You are duplicating something here by using a div and a nav both with class navbar . I don't know why but that's weird.
• Your collapsing div doesn't have id . the id will allow the button to target it for dropdown
• The button that is supposed to hold the toggle for dropdown isn't in your code.
• Since your collapsing div doesn't have an Id, your dropdown button wouldn't be pointing to anything
• Your jsFiddle is different from the code posted here.... The following code is based on the one from your jsfiddle.

Working bootply

Your website takes a lot of time to load, to improve the user experience you might consider loading the js files after or creating a loading screen. The following code is for the navbar.

<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Bootstrap 3</a>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://getbootstrap.com/getting-started/#download">Download Bootstrap</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Examples</li>
                        <li><a href="http://getbootstrap.com/getting-started/#template">Basic template</a></li>
                        <li><a href="http://getbootstrap.com/examples/starter-template/">Starter template</a></li>
                        <li><a href="http://getbootstrap.com/examples/grid/">Grids</a></li>
                        <li><a href="http://getbootstrap.com/examples/jumbotron/">Jumbotron</a></li>
                        <li><a href="http://getbootstrap.com/examples/navbar/">Navbar</a></li>
                        <li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a></li>
                        <li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a></li>
                        <li><a href="http://getbootstrap.com/examples/offcanvas/">Offcanvas</a></li>
                        <li><a href="http://getbootstrap.com/examples/carousel/">Carousel</a></li>
                        <li><a href="http://getbootstrap.com/examples/theme/">Theme</a></li>                        
                        <li class="divider"></li>
                        <li class="dropdown-header">Compatibility</li>
                        <li><a href="http://getbootstrap.com/getting-started/#migration">Migrating from 2.x to 3.0</a></li>
                        <li><a href="http://getbootstrap.com/getting-started/#browsers">Browser support</a></li>
                        <li><a href="http://getbootstrap.com/getting-started/#third-parties">Third party support</a></li>
                    </ul>
                </li>
                <li><a href="http://getbootstrap.com/css">CSS</a></li>
                <li><a href="http://getbootstrap.com/components">Components</a></li>
                <li><a href="http://getbootstrap.com/javascript">JavaScript</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="http://getbootstrap.com/customize">Customize</a></li>
            </ul>
        </div>
    </div>

    <div class="jumbotron">
        <h1>Twitter Bootstrap 3.0</h1>
        <p class="lead">Starter template with CSS and JS included.</p>
        <p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p>
      </div>
</div>