dimanche 19 avril 2015

What CSS do I need to maintain all nav elements across 1 line

I have the following navbar made with twitter-bootstrap:


enter image description here


The problem is - since adding my Search for a listing box - it has pushed the navbar-right elements onto a new line (this is the problem I want to fix).


This is the code for my navbar:



<nav class="navbar navbar-default navbar-static-top custom-navbar" role="navigation">

<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "clazzoo", "/" ,:class=>"navbar-brand" %>
</div>



<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<% if user_signed_in? %>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">My Account<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><%= link_to "My Bookings", user_path(id:current_user.id, anchor: "mybookings") %></li>
<li><%= link_to "My Listings", user_path(id:current_user.id, anchor: "mylistings") %></li>
<li><%= link_to "Create Listing", new_event_url %></li>
<li><%= link_to "Quick Buy", quick_buy_url %></li>
<li><%= link_to "Logout", destroy_user_session_path , method: :delete %></li>
</ul>
</li>
</ul>


<div class="input-group">
<div class="input-group-btn">


<div class="btn-group" role="group">

<input type="text" class="form-control" placeholder="Search for a listing" name="q" id="q">
</div>
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>

</div>
</div>


<ul class="nav navbar-nav navbar-right noBullets">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Help<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Using the site</a></li>
<li><a href="#">Buying a ticket</a></li>
<li><a href="#">Listing an event</a></li>
<li><a href="#">Contacting us!</a></li>
</ul>
</li>
</ul>
<ul class="navbar-right noBullets">
<li><%= link_to "Create Listing", new_event_url, class: "btn btn-info fixNavSlightIndent size11Text" ,role: "button" %> </li>
</ul>
<ul class="navbar-right noBullets chatIconPosition">
<i class="fa fa-comment"><span class="badge">42</span></i>
</ul>
</div>
</nav>


I think the piece which needs fixing is :



<div class="input-group">
<div class="input-group-btn">


<div class="btn-group" role="group">

<input type="text" class="form-control" placeholder="Search for a listing" name="q" id="q">
</div>
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>

</div>
</div>


Thanks in advance for somebody's help! An explanation as to why this is happening would also be valued.


Aucun commentaire:

Enregistrer un commentaire