houman_ag houman_ag - 14 days ago 6
CSS Question

Issue with vertical alignment of navbar elements in navbar

I have a very simple navbar that I created with bootstrap as seen below. The problem I have is that the left 3 items are nicely aligned (horizontal: left and vertical: centre). However, form some reason the items that are right-aligned are stuck to the top of the navbar. Any hints on how I can get them to vertically align to the centre would be appreciated.

@using (Html.BeginForm("SearchName", "Home", FormMethod.Post))
{
<div class="container">
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="/" class="glyphicon glyphicon-book"></a></li>
<li><a href="/">Home</a></li>
<li><a href="/Home/ContactUs">Contact us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="custom-search-input">
<input type="text" id="SearchTerm" name="SearchTerm" class="form-control input-sm" placeholder="Search by Name/Profession" />
</li>
<li>
<span class="input-group-btn">
<button class="btn btn-info btn-sm" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</li>
</ul>
</div>
</nav>
</div>
}

Answer

Simple workaround is that remove the whole thing including the inside markup of:

<ul class="nav navbar-nav navbar-right">

And replaced it with:

<form class="navbar-form navbar-right" role="search">
      <div class="form-group">
           <input type="text" id="SearchTerm" name="SearchTerm" class="form-control input-sm" placeholder="Search by Name/Profession" />
      </div>

       <button type="submit" class="btn btn-default">Search</button>
</form>
Comments