I've not got much experience using Bootstrap, but I'm using a framework (Twig + HTML + Bootstrap) with a default theme provided for a coursework assignment and after moving the navbar elements around the responsive collapse of the options/search bar is occurring too late; i.e. it doesn't collapse at the correct window width forcing the search bar to flow onto a new line underneath the options.
Here's some images to better describe what I mean:
Full Width Navbar
Semi-Width - Should have collapsed but search bar moves onto new line
Collapsed Navbar (After reducing window width further)
..and here's the markup for the navbar (sorry it's so long):
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="{{base}}/">{{context.sitename}}</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="{{base}}/search?query=Authors">Authors</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Publications<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="{{base}}/search?query=Documents">Documents</a></li>
<li><a href="{{base}}/search?query=Data">Data</a></li>
<li><a href="{{base}}/search?query=Source+Code">Source Code</a></li>
<li><a href="{{base}}/search?query=Apps">Apps</a></li>
</ul>
</li>
{% if context.hasadmin %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="{{base}}/admin/pages">Pages</a></li>
<li><a href="{{base}}/admin/users">Users</a></li>
<li><a href="{{base}}/admin/contexts">Contexts</a></li>
<li><a href="{{base}}/admin/roles">Roles</a></li>
<li><a href="{{base}}/admin/info">PHP Info</a></li>
</ul>
</li>
{% endif %}
{% if context.hasdeveloper %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Developer<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="{{base}}/devel/hack">Run Code</a></li>
<li><a href="{{base}}/devel/fail">Fail</a></li>
<li><a href="{{base}}/devel/throw">Throw</a></li>
<li><a href="{{base}}/devel/mail">Test mail</a></li>
{#
<li><a href="{{base}}/devel/errlog">View Error Log</a></li>
<li><a href="{{base}}/devel/clearlog">Clear Error Log</a></li>
#}
</ul>
</li>
{% endif %}
</ul>
<ul class="nav navbar-nav navbar-right">
{% if not context.hasuser %}
<li class="nav"><a href="{{base}}/login?page={{context.action}}">Login</a></li>
{% endif %}
{% if context.hasuser %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user{% if context.hasadmin %} text-danger{% endif %}"></i><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="{{base}}/profile/{{context.user.id}}">View Profile<i class="fa fa-user"></i></a></li>
<li><a href="{{base}}/logout">Logout<i class="fa fa-sign-out"></i></a></li>
</ul>
</li>
{% endif %}
</ul>
<form id="search" action="{{base}}/search" method="get" class="nav navbar-nav navbar-form navbar-right">
<div class="form-group">
<input id="query" type="text" class="form-control" placeholder="Search" name="query" required="required" value="{{query is defined ? query}}">
</div>
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
I'm assuming I've got my classes mixed up/using the wrong ones/in the wrong way but I have no idea! Any help would be much appreciated.
