- This topic has 1 reply, 2 voices, and was last updated 3 years, 10 months ago by Tom.
-
AuthorPosts
-
June 27, 2020 at 8:49 am #1343758Pedro
Hola! Estoy implementando una barra de búsqueda de productos en mi sitio, y el plugin que usaré para esto es:
https://wordpress.org/plugins/advanced-woo-search/
Me gustaría que la barra de búsqueda que el plugin coloca en mi sitio (por medio de shortcode con hook) se viera lo más parecida a la que Tom me ayudó a hacer anteriormente.
Pueden ver el hilo de la conversación aquí: https://generatepress.com/forums/topic/configuracion-de-navegacion-principal/
Aquí dejo el CSS de la barra de búsqueda que Tom me ayudó a hacer:
#primary-menu { margin-left: auto; } .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: #232f3e; padding: 0 10px; height: 38px; line-height: 38px; } .main-navigation .searchform input[type="text"] { font-size: 15px; font-weight: 400; padding-right: 50px; box-sizing: border-box; width: 340px; max-width: 100%; padding: 0 16px; height: 38px; border-radius: 3px; } .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: 1em; height: 1em; left: 10px; top: calc(50% - 0.5em); color: #888; } @media (max-width: 768px) { .main-navigation .searchform svg.mobile-svg { display: block; } .main-navigation .searchform { order: 10; width: 100%; margin: 10px; margin-top: 0px; text-align: center; } .main-navigation .searchform input[type="text"] { font-size: 15px; font-weight: 400; max-width: 100%; width: 100%; padding-left: 36px; height: 40px; border-radius: 3px; } .main-navigation .searchform input[type="submit"] { display: none; } .mobile-bar-items.wc-mobile-cart-items { margin-left: auto; } .main-navigation .searchform button { display: none; } }
En este sitio pueden ver la barra de búsqueda que Tom me ayudó a hacer: https://www.rebajaslocas.com/
Ahora bien, la nueva barra de búsqueda estoy intentando personalizarla en otro sitio, pero no he podido.
Pueden ver el sitio y la nueva barra de búsqueda aquí: https://compralibros.co/
Si no es mucha molestia, podrían ayudarme con esta personalización?
¡Muchas gracias!
June 27, 2020 at 3:40 pm #1344022TomLead DeveloperLead DeveloperHi there,
Actually styling it will take quite a bit of custom CSS, as it’s already styled.
However, moving it to the other side of the logo should be quite easy:
.aws-container { order: 4; }
-
AuthorPosts
- You must be logged in to reply to this topic.