[Resuelto] Buscador de entradas en blog no funciona  

@karen Gracias Karen.

Ahora ya está la barra dentro de la pantalla.

Lo único que la X para cerrar la barra, sigue estando encima del botón Buscar. No sé cómo modificar eso.

Y si se puede modificar el tamaño de la Lupa ya sería perfecto.

Gracias, un saludo.

Christian 

Hola Christian, 

Para esto puedes probar añadir dentro de la media query anterior el siguiente código

.open:before {
right: -11px;
bottom: 25px;
}

Quedaria por ejemplo:

@media only screen and (max-width: 600px) {
.is-form-style input.is-search-input {
max-width: 80%;
margin-left: 20%;
}

.open:before {
right: -11px;
bottom: 25px;
}
}

Si quieres modificar el tamaño puedes probar con el siguiente código

svg.search-icon {
width: 24px;
height: 24px;
}

Un Saludo 

@karen Hola Karen,

Gracias, ya he conseguido poner todo bien. 

Me he fijado que en versión tablet y móvil horizontal, la lupa se sigue viendo en la esquina derecha superior.

Ver captura: https://ibb.co/Z1HCHvF

Gracias y disculpa las molestias.

Un saludo, 

Christian 

Que tal

Veo que pese que has usado los estilos sugeridos por mi compañera los has modificado, vamos a ajustarlo lo mas posible

Prueba con los siguientes estilos CSS

@media(max-width:768px){
.et_pb_menu__logo img {
max-width: 120px;
}
.is-menu-wrapper {
top: 8% !important;
right: 35px !important;
}
}

Con esto debería de bastar

Saludos!

@bruno-vichetti hola Bruno, 

Si pego el código que me indicas, tras los que ya he pegado de Karen, en la versión tablet no veo cambios y en la versión móvil el logo se ve partido a la mitad.

Un saludo,

Christian 

Hola Christian,

El problema es que tu logo no tiene un ancho definido y mientras va adaptándose hace que la altura que toma tu cabecera sea variable por lo que dificulta definir una posición fija del icono.

Ignora lo antes compartido e intentemos con lo siguiente

@media only screen and (max-width: 768x){
.is-menu-wrapper {
right: 8% !important;
top: 8% !important;
}}
@media only screen and (max-width: 600px){
.is-menu-wrapper {
top: 6% !important;
right: 35px !important;
}}

Si los estilos sugeridos no funcionan debes validar si en otra instancia ya estas aplicando CSS a la clase del icono como tal que es "is-menu-wrapper "

Saludos!

@bruno-vichetti Hola Bruno, 

Con esos códigos el logo en vista móvil se ve bien, pero siguen sin mostrarse cambios en la vista tablet/móvil en horizontal.

Los únicos cambios que he realizado en el CSS son los que puedes ver en este hilo, indicados por Karen.

Con sus códigos, la vista desktop y móvil ya estaban bien, solo necesitaba poner el icono de la Lupa en su lugar correcto en la vista tablet/móvil horizontal.

Ver captura:  https://ibb.co/Z1HCHvF

Gracias, un saludo,

Christian

Que tal Christian,

Probemos enfocar los estilos de otra manera 

@media only screen and (max-width: 768px) and (min-width: 600px) {
.is-menu-wrapper {
top: 9% !important;
right: 8% !important;
}}

Saludos!

@bruno-vichetti

Hola Bruno,

Con ese código no se muestran cambios en la vista tableta/móvil horizontal. La lupa se sigue mostrando en la esquina superior derecha.

Te muestro todo el código que tenía puesto con Karen:

Gracias, un saludo.

Christian 

Hola Christian.

Por favor abre un nuevo tema ya que la consulta principal de esta consulta se resolvió y lo que estamos tratando ahora es más de diseño, al abrir un nuevo tema mantenemos un orden y nos ayudas a nosotros en nuestro trabajo ya que no tenemos que leer toda la entrada para ver exactamente qué es lo que necesitas.

Abre un nuevo tema y lo revisamos 😉 

Un saludo