Avisos
Vaciar todo

[Resuelto] Buscador de entradas en blog no funciona  

Página 2 / 2
 
Christian
 Christian
Usuario experto

Hola, 

Estoy terminando una web con blog y tienda online.

En el header junto al menú, tengo un buscador de productos y luego en la página del blog, tengo un buscador para entradas, pero éste último no funciona.

¿Necesito tener un plugin especial para tener un buscador de productos y otro para entradas?

Enlace al blog: Blog - Hispanae

Gracias, un saludo.

Christian

Contenido solo visible a usuarios registrados

Respondido : 21/11/2022 7:38 pm
Christian
 Christian
Usuario experto

@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 

Respondido : 22/11/2022 10:17 pm

Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

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 

Respondido : 22/11/2022 11:00 pm
Christian
 Christian
Usuario experto

@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 

Respondido : 22/11/2022 11:48 pm

Bruno
 Bruno
Soporte CMS Webempresa Moderator

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!

 

 

Respondido : 23/11/2022 12:09 am
Christian
 Christian
Usuario experto

@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 

Respondido : 23/11/2022 12:16 am

Bruno
 Bruno
Soporte CMS Webempresa Moderator

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!

Respondido : 23/11/2022 12:58 am
Christian
 Christian
Usuario experto

@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

Respondido : 23/11/2022 1:07 am

Bruno
 Bruno
Soporte CMS Webempresa Moderator

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!

Respondido : 23/11/2022 1:41 am
Christian
 Christian
Usuario experto

@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:

@media only screen and (max-width: 600px) {
.is-menu-wrapper {
top: 4%;
right: 35px;
}
}
@media only screen and (max-width: 600px) {
.is-form-style input.is-search-input {
max-width: 80%;
margin-left: 10%;
}

.open:before {
right: -11px;
bottom: 25px;
}
}
svg.search-icon {
width: 30px;
height: 30px;
}

Con ese código se ve todo bien en Desktop y vista móvil.
 
Ahora necesito mover el icono de la Lupa en la vista tableta / móvil horizontal. Para ponerlo alineado con el icono del carrito y menú hamburguesa.
 

Gracias, un saludo.

Christian 

 

Respondido : 23/11/2022 10:25 am

Pepe
 Pepe
Soporte CMS Webempresa Admin

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

 

Respondido : 23/11/2022 11:36 am
Página 2 / 2