Search code examples
htmlcsstwitter-bootstrapalignmentsearchbar

Alignment of list items navbar bootstrap 3.3.6

Please see code below or this bootply

I'm having some serious issues with this.

My issues:

  1. I can't get all of the items in the navbar nicely aligned. Any ideas?

  2. I don't want to show the searchfield on the mobile version, how omit?

  3. Trying to insert the bootstrap glyphicon for search instead of the images in the css code for search, but how trigger glyphicon in css, can I make it dark or white?

    <nav class="navbar navbar-inverse navbar-fixed-top my-navbar">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/boyt2">Company Name</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">&bull;&nbsp; Link 1<span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link 2</a></li>
        <li>
            <form class="navbar-form navbar-left searchsite" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                    <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle avatar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Username <span class="caret"></span> &nbsp; <img src="http://placehold.it/30x30"></a>
          <ul class="dropdown-menu noshadow">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>






<!-- JavaScript files should be linked at the bottom of the page -->
<script src="js/jquery.min.js"></script>

<!-- Latest compiled and minified Javascript -->
<script src="js/bootstrap.min.js"></script>

Solution

  • Add this CSS:

    @media (min-width: 768px) {
    .navbar .navbar-brand {
        padding: 20px 15px;
    }

    .navbar .nav:not(.navbar-right) > li > a {
        padding: 20px 15px;
    }

    .navbar-form {
        margin-top: 14px;
    }
}

    The image in the navbar-right is causing the navbar to be 60px tall instead of the default 50px, 20px padding will center the elements.

    To hide the searchbar on mobile, you can add the class hidden-xs:

    <form class="navbar-form navbar-left searchsite hidden-xs" role="search">
</form>