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 <!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 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"> <!--<header>-->
<div class="input-group"> <button type="button" class="btn-search"> <i class="fas fa-search"></i> <a class="nav-link" data-toggle="dropdown" href="#">
<input type="text" class="form-control" placeholder="Busca temas, ubicaciones y fuentes"> <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 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 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> <!--</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>
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 {
}*/