CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
houman_ag
houman_ag

Reputation: 237

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>
}

Upvotes: 0

Views: 486

Answers (2)

claudios
claudios

Reputation: 6656

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>

Upvotes: 4

Jon Wilson
Jon Wilson

Reputation: 86

Use a margin-top CSS rule for element ul.nav.navbar-nav.navbar-right. Adjust accordingly until it best aligns with the menu on the left side of the container across all browsers on which you'd like your web site to be viewed.

Upvotes: 0

Related Questions