Customizing Bootstrap menu

Asked

Viewed 645 times

1

I want to make a menu in a HEAD with a dropdown, I’m trying to customize a bootstrap code but without success follows the code:

* {
  padding: 0;
  border: 0;
  box-shadow: 0;
  list-style: none;
  margin: 0;
}
header {
  background-color: black;
  width: 100%;
  height: 30px;
}
header div ul li a {
  color: #ffffff;
  text-align: right;
  height: 15px;
  border: 1px solid;
}
.form-login {
  padding: 1em;
  min-width: 280px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
  <header>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li id="registro">
          <a href="#"><i class="glyphicon glyphicon-plus-sign"></i> Registro</a>
        </li>
        <li class="dropdown" id="entrar">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="glyphicon glyphicon-user"></i> Entrar</a>
          <div class="dropdown-menu form-login stop-propagation">
            <div class="form-group">
              <label for="exampleInputEmail1"><i class="glyphicon glyphicon-envelope"></i> Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" />
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1"><i class="glyphicon glyphicon-lock"></i> Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
            </div>
            <button type="submit" class="btn btn-success btn-block"><i class="glyphicon glyphicon-ok"></i> Submit</button>
          </div>
          <li>Telefone: 555-658969</li>
      </ul>
    </div>
  </header>
  </body

Follows an image of how it is currently, for a better understanding.

Uma imagem pra ilustrar como ele fica atualmente

I want it to be aligned with the header it’s with height 30px on top. how do I do this customization ?

css html5 css3 front-end

1 answer

0

Adds in css :

header{
    line-height:30px; 
}

Browser other questions tagged css html5 css3 front-end

You are not signed in. Login or sign up in order to post.