Bootstrap3 Navbar toggle not working - twitter-bootstrap-3

Question

I am using bootstrap in my website to make it responsive (I will be making a custom design and not use bootstrap's default css). I have created a bootstrap3 navbar but the button which appears after shrinking the viewport does not function as nothing happens when it is clicked.
I have searched for this on stackoverflow and even tried incorporating changes mentioned here. But its not working.
Javascript is enabled in my browser and I have referenced bootstrap.js in my html as well.
My code is as follows:
<div class="navbar navbar-default navbackcolor" role="navigation">
<div class="container">
<div class="comnWdth">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="number">X12 X123 X123</span>
<span class="text">10am-7pm Mon-Sat</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>My Account</li>
<li>Logout</li>
<li>Register</li>
<li>Login</li>
<li>My Cart</li>
</ul>
</div>
</div> <!-- End .comnWdth -->
</div> <!-- End container -->
</div> <!-- End Navbar -->
Also the toggle button and header ("X12 X123 X123 10am-7pm Mon-Sat") is appearing in different rows when collapsed. How can I make them appear in the same row when in a narrow viewport?
Thanks.

Answer 1

As of Bootstrap 3, you should use navbar-right instead of pull-right inside a navabr:
<ul class="nav navbar-nav navbar-right">.
As for your second question, you should probably post it separately, and include your css because there are clearly custom classes there "text" and "number" that we'll need to know to make good suggestions.