Evitar que pierda los estilos de Bootstrap

saulrayados · #1 (**permalink**) 03/03/2020, 18:09

Hola, tengo un problema que llevo como 7 horas intentando resolver.
Como puedo hacer que la barra de búsqueda tenga un menú desplegable pero sin que pierda los estilos de Bootstrap, que no pierda su tamaño original, ya intente cambiando cambiando el class de la etiqueta <a> por id y sigue pasando lo mismo.
Tambien tengo otro problema, al ponerle un header el menu desplegable aparece debajo del heder, en vez que aparezca sobre el header

Código HTML:

Ver original<html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Google Noticias</title>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
    </head>
    <body>
    <!--<header>-->
    <div id="search">
        <div class="input-group">
      <button type="button" class="btn-search">
      <i class="fas fa-search"></i>
    </button>
      <a class="nav-link" data-toggle="dropdown" href="#">
 
            <input type="text" class="form-control" placeholder="Busca temas, ubicaciones y fuentes">
    </a>
      <div id="drop-menu">
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <a class="dropdown-item" href="#">Separated link</a>
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
      </div>
      
            <div class="input-group-append">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
        <div id="container">
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                    <a class="dropdown-item" href="#">Separated link</a>
                </div>
        </div>
            </div>
        </div>
      </div>
      <!--</header>-->
    
 
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

Código CSS:

Ver originalheader {
  overflow: hidden;
  background-color: #F1F1F1;
  padding: 20px 10px;
}
 
#search {
  width: 70%;
  align: center;
  margin: 0 auto;
}
 
i {
  position: absolute;
  top: 10px;
  left: 7px;
}
 
.btn-search {
  width: 30px;
  border: 1px solid;
}
 
/*#container {
 
}*/