Archived topic
Configuración de navegación principal
50 replies · Started by Pedro on May 23, 2020
Hola Tom! Espero que estés muy bien.
Quisiera que por favor me ayudes con una última cosa. Estoy implementando una búsqueda con ajax en mi sitio, y el plugin que usaré es este:
https://wordpress.org/plugins/advanced-woo-search/
Sin embargo, 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 me ayudaste a hacer.
Aquí te dejo el CSS de la barra de búsqueda que actualmente tengo en mi sitio:
#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;
}
}La nueva barra de búsqueda estoy intentando personalizarla en otro sitio, pero no he podido.
Puedes ver el sitio y la nueva barra de búsqueda aquí: https://compralibros.co/
Me gustaría implementar la nueva barra de búsqueda en este otro sitio: https://www.rebajaslocas.com/
Si no es mucha molestia, podrías ayudarme con esta personalización?
¡Muchas gracias!
Hi there,
can you start a new topic with a link to the site with the AWS Search widget in place and an example of how you want it to look. It may be out of our scope or ability but we will take a look and let you know.
Hola! He colocado esta barra de búsqueda en un nuevo sitio: https://mejorapress.com/
Sin embargo en la versión móvil no logra verse bien, el menú no está bien ubicado.
El código CSS que usé en este nuevo sitio es el que envié en el mensaje anterior.
¿Pueden ayudarme?
¡Gracias!
This should fix it:
.main-navigation.has-branding .menu-toggle {
margin-left: auto;
}Hola Tom! Funcionó perfectamente.
Una última pregumta, el siguiente CSS debería quitarlo verdad?
#primary-menu {
margin-left: auto;
}¡Gracias!
Es más la pregunta sería: Teniendo en cuenta que este nuevo sitio solo es un blog (que no usa WooCommerce) el CSS sería el mismo?
.main-navigation.has-branding .menu-toggle {
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: #32373c;
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: 300px;
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;
}
}That CSS is likely still necessary.
If there's no WC, you can likely remove the CSS referencing wc-mobile-cart-items.
Muchas gracias Tom!
No problem :)
Hola de nuevo! Jaja
Tom, esta barra de búsqueda muestra también las páginas en los resultados.
Me gustaría que solo muestre las entradas del blog, sabes cómo puedo hacerlo?
Gracias!
Hi there,
Where's the search bar coming from in this case? A plugin or custom code?
Hola Tom! Fue la barra de búsqueda que me ayudaste a crear con HTML y CSS.
La barra de búsqueda está en este sitio: https://mejorapress.com/
Sin embargo, en las búsquedas me está mostrando páginas y entradas del blog.
Me gustaría que solo muestre las entradas del blog.
Este fue el hook que me diste:
<form role="search" method="get" id="searchform" class="searchform" action="https://mejorapress.com/">
<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="¿Qué estás buscando?">
<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>In the code, find this line:
<input type="text" value="" name="s" id="s" placeholder="¿Qué estás buscando?">
And add this under it:
<input type="hidden" post_type="post">
Hola Tom!
He añadido el código pero no ocurrió nada, en los resultados de búsqueda se siguen mostrando las páginas del sitio.
Solo quiero que se muestren las entradas del blog.
Try this instead:
<input type="hidden" name="post_type" value="post">
