Twitter Bootstrap 3.1.1 navbar collapse and div issue

Question

I am new to using Twitter Bootstrap and I have a navbar that doen't collapse as it should.

It shows well on a desktop at fullscreen (all menu items on one line) but as I collapse my browser window from left to right, the navbar items grow to become two rows before appropriately stacking one on top of the other until full collapse.

How do I make the navbar collapse as it should?

I also have a div that I want to place right below the navbar div to show a company logo (image). However, the div seems to start right at the top of the page insted of directly below the navbar div.

How do I fix this?

See: Demo JSFiddle

 <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">XYZ</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="~/"><span class="glyphicon glyphicon-home"></span>Home</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-list-alt"></span>Products<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="OndulineSheets">Onduline Sheets</a></li>
                                <li><a href="OnduvillaTiles">Onduvilla Tiles</a></li>
                                <li><a href="#">Other Products</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-ok-sign"></span>Guarantee<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="Guarantee">Our Guarantee</a></li>
                                <li><a href="#">Tests and Certificates</a></li>
                            </ul>
                        </li>
                        <li><a href="~/Clients"><span class="glyphicon glyphicon-user"></span>Our Clients</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-camera"></span>Projects<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="Expos">Expos</a></li>
                                <li><a href="Projects">Training</a></li>
                                <li><a href="#">Eco Friendly Housing</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-inbox"></span>FAQ<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="Onduline">Onduline</a></li>
                                <li><a href="Onduvilla">Onduvilla</a></li>
                            </ul>
                        </li>
                        <li><a href="~/Downloads"><span class="glyphicon glyphicon-download-alt"></span>Downloads</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-info-sign"></span>About<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Vision and Mission</a></li>
                                <li><a href="Eco-Responsibility">Eco-Responsibility</a></li>
                            </ul>
                        </li>
                        <li><a href="~/Contact"><span class="glyphicon glyphicon-pencil"></span>Contact Us</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="TitleContent" style="text-align: center">
            <img src="images/ecolinelogo.jpg" style="border-style: none" >
            <br />
        </div>
        <div class="container body-content">
            <div id="MainContent">

            </div>
            <hr />
            <footer>
                <p>&copy; <?php echo date("Y"); ?> - Copyright © XYZBuilding Supplies Ltd - All rights reserved</p>
            </footer>
        </div>

Answer 1

First of all give your body a little bit of padding as per you navbar height

body{
padding-top:100px;
}

because you are using fixed navbar which is fixed at the top of the page. any content you are going to put after this div will start from the body top. so the padding is necessary which is also mentioned in the docs of bootstrap.

and also you have too many menu item in your menu . which is not getting the proper space specified by the columns. so you need to control them via media queries. and i try to make it work for you here is my jsfiddle link. you could check it . It might helpful for you

http://jsfiddle.net/datechogeek/w4sJC/