- This topic has 50 replies, 3 voices, and was last updated 3 years, 7 months ago by Tom.
-
AuthorPosts
-
May 23, 2020 at 10:25 am #1298313Pedro
Hola! Estoy haciendo un nuevo sitio: https://compralibros.co/
Me gustaría añadir una barra de búsqueda como esta imagen: https://mega.nz/file/u1knnQpT#oFj-y7bKeV9rY3_aWpcDorY2d_ySTFIDo_GYtBOAzZI
Esa barra de búsqueda hace parte de este sitio: https://www.flipkart.com/
¿Podrían ayudarme con esto?
¡Muchas gracias!
May 23, 2020 at 4:43 pm #1298591TomLead DeveloperLead DeveloperHi there,
You’d need to make sure there’s enough space – it doesn’t look like there is right now.
Then you could do something like this: https://generatepress.com/forums/topic/show-search-box-in-navigation/page/2/#post-1238304
May 23, 2020 at 7:22 pm #1298659PedroHola Tom! Gracias por responder.
He reducido la cantidad de elementos en el menú principal, así pude hacer espacio para colocar la barra de búsqueda.
He colocado el hook, y la barra de búsqueda ya se muestra, sin embargo hace falta arreglar la forma en que se ve con CSS.
Me gustaría que se viera así: https://mega.nz/file/u1knnQpT#oFj-y7bKeV9rY3_aWpcDorY2d_ySTFIDo_GYtBOAzZI
Recuerda que el sitio de la imagen es: https://www.flipkart.com/
También me gustaría que se viera igual para la versión móvil.
¿Podrías ayudarme? ¡Gracias!
Hello Tom! Thanks for answering.
I have reduced the number of items in the main menu so I can make room for the search bar.
I have placed the hook, and the search bar is already displayed, however it is necessary to fix the way it looks with CSS.
I would like it to look like this: https://mega.nz/file/u1knnQpT#oFj-y7bKeV9rY3_aWpcDorY2d_ySTFIDo_GYtBOAzZI
Remember that the image site is: https://www.flipkart.com/
I would also like it to look the same for the mobile version.
Could you help me? Thank you!
May 24, 2020 at 11:01 am #1299552TomLead DeveloperLead DeveloperTry this:
.main-navigation .searchform { order: 2; margin-right: auto; } .main-navigation .navigation-branding { margin-right: 0; } .main-navigation .mobile-bar-items { order: 3; } @media (max-width: 768px) { .main-navigation .searchform input[type="text"] { max-width: 150px; } }
You may need to use the icon as your mobile nav site logo instead of the full logo.
May 24, 2020 at 12:21 pm #1299635PedroHola Tom! Gracias por la ayuda.
He colocado el CSS y la barra de búsqueda ahora se muestra correctamente en la versión de escritorio. En la versión móvil no se ve igual al del sitio de referencia.
Así es como se ve en mi sitio: https://mega.nz/file/rh0BTKaS#6KbS9zdxefUQ7lg16tUs9-4k-Ybc-FrQnDoWEa8ImLE
Así es como me gustaría que se vea: https://mega.nz/file/ellxVKzA#zLuLIDS-9yypyOHtHuLHeBBy2xUJntD8QiKeeS-9KYY
Además hay que tener en cuenta lo siguiente:
– La barra de búsqueda de mi sitio no tiene los mismos estilos que el original (alto, bordes, sombras)
– La barra de búsqueda de mi sitio no tiene el texto de instrucción: “Search for products…”
– Mi barra de búsqueda no tiene el ícono de la lupa como el original. ¿Cómo puedo hacer esto?Espero que por favor puedas ayudarme.
¡Muchas gracias!
May 24, 2020 at 12:23 pm #1299636PedroOtra cosa para añadir, si me puedes ayudar.
Me gustaría que el menú principal esté alineado con el contenedor del sitio.
Si ingresas a un producto cualquiera, puedes ver que el menú es menos ancho que el contenedor del sitio.
¡Gracias!
May 24, 2020 at 7:35 pm #1299909TomLead DeveloperLead DeveloperThis should get you further:
@media (max-width: 768px) { .main-navigation .searchform { order: 10; width: 100%; margin: 10px 0; text-align: center; } .main-navigation .searchform input[type="text"] { max-width: 100%; width: 90%; } .main-navigation .searchform input[type="submit"] { display: none; } .mobile-bar-items.wc-mobile-cart-items { margin-left: auto; } }
The placeholder and icon is harder, as it’s not included in the WordPress search form function. Can you share your hook content with me?
May 25, 2020 at 6:53 am #1300454PedroHola Tom! Gracias por la ayuda que me estás brindando, realmente la aprecio.
Este nuevo código CSS debo añadirlo adicional al primero que me diste? O lo reemplaza?
El hook que estoy usando es el que me recomendaste al principio:
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <div> <label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label> <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" /> <input type="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" /> </div> </form>
Con respecto al ícono, yo estoy usando GenerateBlocks en este sitio, ¿No hay alguna manera de colocar el ícono de búsqueda? 🙁
May 25, 2020 at 4:10 pm #1301271TomLead DeveloperLead DeveloperYou’d want to add that CSS in addition to your previous CSS.
Change your hook to this:
<form role="search" method="get" id="searchform" class="searchform" action="https://compralibros.co/"> <div> <svg class="mobile-svg" aria-hidden="true" data-prefix="fas" data-icon="search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path> </svg> <label class="screen-reader-text" for="s"></label> <input type="text" value="" name="s" id="s" placeholder="Busca libros, autores y más"> <button><svg aria-hidden="true" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path> </svg></button> </div> </form>
Then here’s your complete CSS:
.main-navigation .searchform { order: 2; margin-right: auto; position: relative; } .main-navigation .searchform button svg { width: 1em; height: 1em; } .main-navigation .searchform button { position: absolute; right: 0; background: transparent; color: #000; padding: 0 10px; height: 35px; line-height: 35px; } .main-navigation .searchform input[type="text"] { padding-right: 50px; box-sizing: border-box; width: 400px; max-width: 100%; padding: 0 10px; height: 35px; } .main-navigation .navigation-branding { margin-right: 0; } .main-navigation .mobile-bar-items { order: 3; } .main-navigation .searchform svg.mobile-svg { display: none; position: absolute; width: 20px; height: 20px; left: 10px; top: calc(50% - 10px); color: #888; } @media (max-width: 768px) { .main-navigation .searchform svg.mobile-svg { display: block; } .main-navigation .searchform { order: 10; width: 100%; margin: 10px; text-align: center; } .main-navigation .searchform input[type="text"] { max-width: 100%; width: 100%; padding-left: 50px; } .main-navigation .searchform input[type="submit"] { display: none; } .mobile-bar-items.wc-mobile-cart-items { margin-left: auto; } .main-navigation .searchform button { display: none; } }
May 25, 2020 at 4:51 pm #1301290PedroHola Tom! Muchas gracias por toda tu ayuda.
He actualizado el hook y el CSS, la barra de búsqueda ya va tomando forma 🙂
Sin embargo aquí algunos puntos por mejorar:
– En la versión escritorio el icono de la lupa va a la derecha y reemplaza al botón, además el icono es más delgado y de color azul.
– En la versión móvil el texto aparece por encima del icono de la lupa.
– Me gustaría reducir un poco el espacio que hay entre la barra de búsqueda y el encabezado del sitio (en la versión móvil)
– El alto de la barra de búsqueda sigue siendo un poco mayor a comparación con el original, me gustaría reducir un poco el alto de la barra de búsqueda.En pocas palabras, me gustaría que la barra de búsqueda sea lo más parecido posible al original: https://www.flipkart.com/
De verdad agradezco todo el apoyo que siempre me brindan, ustedes son los mejores!
¡Muchas gracias!
Hello Tom! Thank you so much for all your help.
I have updated the hook and the CSS, the search bar is already taking shape 🙂
However, here are some points to improve:
– In the desktop version, the magnifying glass icon goes to the right and replaces the button, and the icon is thinner and blue.
– In the mobile version, the text appears above the magnifying glass icon.
– I would like to reduce the space between the search bar and the site header a little (in the mobile version)
– The height of the search bar is still a little higher compared to the original, I would like to reduce the height of the search bar a little.In short, I would like the search bar to be as similar as possible to the original: https://www.flipkart.com/
I really appreciate all the support you always give me, you are the best!
Thank you!
May 28, 2020 at 1:25 pm #1305545PedroHola! Hace casi 3 días que no recibo respuesta. ¿Pueden ayudarme por favor?
¡Muchas gracias!
May 28, 2020 at 2:46 pm #1305626TomLead DeveloperLead DeveloperHi there,
Sorry for the delay! Your reply slipped through our system.
While I’m happy to help point you in the right direction, I’m not able to provide 100% working custom development like this, unfortunately.
I have updated the code above to be closer to the result you’re wanting, but it will take some more tweaking to copy exactly.
Hope it helps! 🙂
May 28, 2020 at 7:38 pm #1305777PedroHola Tom! No te preocupes, muchas gracias por toda la ayuda!
Ya la barra de búsqueda se ve muchísimo mejor.
Una última cosa, y la verdad no quiero ser una molestia. Es que igual en la librería de GeneratePress no hay muchas plantillas que tengan una barra de búsqueda así como esta.
¿Sería posible que en la versión de escritorio la barra de búsqueda sea un poco más ancha y el icono de la lupa sea del mismo color azul del menú principal?
También si es posible reducir el alto de esta barra de búsqueda tanto para la versión móvil como la de escritorio. Y si hay alguna opción para poder personalizar el texto “Busca libros, autores…”, me refiero al tamaño de la fuente y el grosor.
¡Muchas gracias!
May 29, 2020 at 9:11 am #1306637TomLead DeveloperLead DeveloperYes, you’ll see the height in the CSS above which you can tweak.
For the color of the icon, give the
svg
element acolor
attribute in the CSS.Changing placeholder styles is difficult, but you can add font-size, font-family, font-weight etc.. to the
.main-navigation .searchform input[type="text"]
element.May 29, 2020 at 3:07 pm #1307029PedroWow Tom! Realmente me has dejado sin palabras.
¡Por fin he podido colocar esa barra de búsqueda en mi nuevo sitio!
Realmente te agradezco toda la ayuda que me brindaste, mis mejores deseos.
Un saludo!
-
AuthorPosts
- You must be logged in to reply to this topic.