title: How to style a typeahead in a nav in bootstrap?
body: <p>My code looks like </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;style&gt;
      &lt;style type="text/css"&gt;
      
  
  
  /*.tt-query,  UPDATE: newer versions use tt-input instead of tt-query */
  .tt-hint {
      width: 396px;
      height: 30px;
      padding: 8px 12px;
      font-size: 24px;
      line-height: 30px;
      border: 2px solid #ccc;
      border-radius: 8px;
      outline: none;
  }
  
  /*.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query 
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  }
  */
  .tt-hint {
      color: #999;
  }
  
  .tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
      width: 422px;
      margin-top: 12px;
      padding: 8px 0;
      background-color: #fff;
      border: 1px solid #ccc;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      box-shadow: 0 5px 10px rgba(0,0,0,.2);
  }
  
  .tt-suggestion {
      padding: 3px 20px;
      font-size: 18px;
      line-height: 24px;
  }
  
  .tt-suggestion.tt-is-under-cursor { /* UPDATE: newer versions use .tt-suggestion.tt-cursor */
      color: #fff;
      background-color: #0097cf;
  
  }
  
  .tt-suggestion p {
      margin: 0;
  }
      &lt;/style&gt;
       &lt;/head&gt;
    &lt;body&gt;
    &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class="navbar-brand" href="#"&gt;Test&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li&gt;
              &lt;input id = "pages" class = "typeahead form-controler" type="text" placeholder="abc"&gt;
            &lt;/li&gt; 
            &lt;li&gt;
              &lt;a href="#"&gt;
                &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
              &lt;/a&gt;
            &lt;/li&gt; 
          &lt;/ul&gt;
          
          
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
     &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/typeahead.bundle.min.js"&gt;&lt;/script&gt;
      
      &lt;script&gt;
      var substringMatcher = function(strs) {
    return function findMatches(q, cb) {
      var matches, substringRegex;
  
      // an array that will be populated with substring matches
      matches = [];
  
      // regex used to determine if a string contains the substring `q`
      substrRegex = new RegExp(q, 'i');
  
      // iterate through the pool of strings and for any string that
      // contains the substring `q`, add it to the `matches` array
      $.each(strs, function(i, str) {
        if (substrRegex.test(str)) {
          matches.push(str);
        }
      });
  
      cb(matches);
    };
  };
  
  var pages = ['abc',' def','ghi'];
  /***************************/
  /*I'm discussing the following comment*/
  /***************************/
  /*
  $('#pages.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
  },
  {
    name: 'pages',
    source: substringMatcher(pages)
  });*/
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>(note, it doesn't run here due to me not being able to include the bootstrap and typeahead js).</p>
  
  <p>When I leave the last part of the Javascript disabled, the typeahead is styled properly:</p>
  
  <p>(I can't include a picture, see <a href="http://i.stack.imgur.com/OpHTQ.png" rel="nofollow">http://i.stack.imgur.com/OpHTQ.png</a> for a screenshot</p>
  
  <p>On the other hand, when I uncomment the last part of Javascript (to make typeahead work), it's not styled:</p>
  
  <p>See <a href="http://i.stack.imgur.com/XW3yd.png" rel="nofollow">http://i.stack.imgur.com/XW3yd.png</a> for a screenshot</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Removed extra style from the top and changed to <code>$('#pages').typeahead({</code></p>
  
  <p>Now the screenshot looks like http :// i.stack.imgur.com/isJPh.png</p>
  
  <p>There's a textbox under a textbox. The bottom one is not editable, is styled and the suggestions appear there. The top one is where the typing happens, is not styled and has final text appears there.</p>