CODEWITHSUNDEEP
csshtmltwitter-bootstraptwitter-bootstrap-3
emd
emd

Reputation: 414

Bootstrap - Center text and search field in nav bar

I'd like the placeholder text ("Search") to be vertically aligned with the nav text (Blog, About).

I'd like the Blog/About to be vertically centred in the nav bar.

I struggle with CSS so I'm not quite sure which classes to add/change.

Example here.

HTML I'm using:

<header class= "blog-masthead">
<div class="container">
    <nav class="blog-nav">
        <a class="blog-nav-item " href="/blog">Blog</a>
        <a class="blog-nav-item current" href="/about">About</a>
    <form class="navbar-form navbar-right" role="search">
      <div class="form-group">
        <input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch">
      </div>
      <button type="submit" class="btn btn-xs"><span class="glyphicon glyphicon-search"></span></button>
    </form>
    </nav>
</div>

Upvotes: 0

Views: 2116

Answers (3)

emd
emd

Reputation: 414

I played around with a few other examples (I don't fully understand how Bootstrap works yet) and got it to work as well with this:

<header class= "blog-masthead">
    <nav class="nav" role="navigation">
        <div class="container">
            <ul class="nav navbar-nav">
            {{ nav from="/" max_depth="2" }}
                <li><a class="blog-nav-item {{ if is_current }}current{{ endif }}" href="{{ url }}">{{title}}</a></li>
            {{ /nav }}
            </ul>
            <form class="navbar-form navbar-right" role="search">
              <div class="form-group">
                <input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch">
              </div>
              <button type="submit" class="btn btn-xs"><span class="glyphicon glyphicon-search"></span></button>
            </form>
        </div>
    </nav>
</header>

Upvotes: 0

Hieu Le
Hieu Le

Reputation: 8415

You have to set the padding and line-height property of your .blog-nav-item selector correctly.

.blog-nav-item {
  padding: 13px; // vertical margin of navbar-form
  line-height: 33px; // actual height of search fom
}

Fiddle: http://jsfiddle.net/rgct4p0g/4/

Upvotes: 0

monkeyinsight
monkeyinsight

Reputation: 4859

Use 'pull-right' class to align form

<form class="pull-right" role="search">

Then make display: inline-block your input and use line-height: 30px to align inline elements verticaly

http://jsfiddle.net/rgct4p0g/3/

Upvotes: 1

Related Questions