CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Houy Narun
Houy Narun

Reputation: 1725

Search Form in Navigation Bar is not Aligned Correctly

I am creating a bootstrap navigation bar with search form, but as I put search form into my navigation, the navigation items are not aligned correctly as the form goes to the top and text item menu goes to the bottom.

Here to demonstrate the problem:

html,
body {
  background: #f7f7f8
}

.text-white {
  color: #fff !important;
}

section.header {
  padding: 90px 0;
}

.logo {
  line-height: 60px;
  /*position: fixed;*/
  float: left;
  margin: 0 46px;
  color: #FFF;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
}

nav {
  /*display: flex;*/
  background: #099cec;
  height: 64px;
  color: #FFF;
  width: 100%;
  line-height: 60px;
}

nav ul {
  line-height: 60px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #FFF;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}

nav.black ul {
  background: #000;
}

nav ul li {
  display: inline-block;
  padding: 0 40px;
  ;
}

nav ul li a,
nav ul li a:hover {
  text-decoration: none;
  color: #FFF;
  font-size: 16px;
}

.menu-icon {
  line-height: 60px;
  width: 100%;
  background: #000;
  text-align: right;
  box-sizing: border-box;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

@media(max-width: 786px) {
  .logo {
    /*position: fixed;*/
    color: #FFF;
    top: 0;
    margin-top: 16px;
  }
  nav ul {
    max-height: 0px;
    background: #000;
  }
  nav.black ul {
    background: #000;
  }
  .showing {
    max-height: 34em;
  }
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    text-align: center;
  }
  .menu-icon {
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

</head>

<body>

  <!-- Navigation -->
  <!-- Static navbar -->
  <header>
    <nav>
      <div class="menu-icon">
        <i class="fa fa-bars fa-2x"></i>
      </div>
      <div class="logo">
        <!-- <img src="mktlogo.jpg"> -->
        Private Package
      </div>
      <div class="menu">
        <ul>

          <li>

            <div class="form-group has-feedback">

              <input type="text" class="form-control" id="inputDefault25">
              <span class="fa fa-search form-control-feedback"></span>
            </div>
          </li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- /Navigation -->




  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

enter image description here

See, every form and item menu on the right side does not go on correct position.

What is wrong with that? How can I correct it? Thanks

Upvotes: 0

Views: 145

Answers (2)

Siva
Siva

Reputation: 30

CSS is missing for search icon. So, it make line height is more compare to menu items. Below CSS works fine.

.form-group {
    position: relative;
}
.form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
    top: 0;
    left: auto;
    right: 0;
}

Upvotes: 1

MaxxyM11
MaxxyM11

Reputation: 36

The only thing your CSS is missing is this:

.form-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

Upvotes: 0

Related Questions