1

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>

dippas
  • 58,591
  • 15
  • 114
  • 126
Marcus Silverman
  • 243
  • 1
  • 7
  • 22

3 Answers3

1

For the search button, try using font-awesome, it would look better (there is a white/black version (http://fontawesome.io/icon/search/))

Refer to this link: How to center navbar elements vertically (Twitter Bootstrap)? for the vertical centering

Use this (set the class to hidden-phone hidden-tablet) to remove search on mobile

<li class="hidden-phone hidden-tablet">
                    <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>

Hope this helped! (Try to accept the answer if it works) :)

Community
  • 1
  • 1
Ronak Shah
  • 936
  • 9
  • 17
  • in case hidden-phone hidden-tablet doesn't work, refer to [this old stack overflow here] (http://stackoverflow.com/questions/16546267/twitter-bootstrap-responsive-show-table-column-only-on-desktop) for more info – Ronak Shah May 28 '16 at 20:08
  • Thanks Ronak, still having some issues though. – Marcus Silverman May 28 '16 at 21:25
1
  • the misalignment is due to height of the image of your image in .navbar-right
  • to hide the search in mobile you can use hidden-xs
  • to use the search icon you can use glyphicons that bootstrap already has. You can check them here

.glyphicon-search {
  color: white
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top my-navbar">
  <div class="container-fluid">
    <!-- 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 class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <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>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left hidden-xs" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
      </form>
      <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/20x20"></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>
dippas
  • 58,591
  • 15
  • 114
  • 126
  • Thank you very much dippas, but the height of the image is only set to 30 px, so how can it cause problems? but t's also displaying at a smaller size for some reason? like 27x27.. Confused – Marcus Silverman May 28 '16 at 21:24
  • if you test it, you will see that `img` `height` changes the `height` of `navbar` – dippas May 28 '16 at 21:39
1

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>
Charlie
  • 1,117
  • 9
  • 12
  • Thank you very much Charlie, but how come the image in the navbar-right is causing the navbar to expand. It's only supposed to be 30x30 but is displaying at a smaller size for some reason? I'm confused. – Marcus Silverman May 28 '16 at 21:22
  • How could I get the navbar back to the default size of 50px? This would be ideal. Thanks a million. – Marcus Silverman May 28 '16 at 21:32
  • The reason is because the nav items have a padding of 15px. Changing the padding of the right nav item to 10px fixes the height of the navbar back to 50px (-5px on top and -5px on bottom). That would be an easy fix. If you want to do that, here is the CSS to add: .navbar .navbar-right > li > a { padding: 10px; } – Charlie May 28 '16 at 21:58
  • Alternatively, you could make the image 40x40 and do: .navbar .navbar-right > li > a { padding: 5px; } – Charlie May 28 '16 at 21:59
  • Thanks Charlie, I think I understand now. – Marcus Silverman May 29 '16 at 08:14