[Resolved] Configuración de navegación principal

Home Forums Support [Resolved] Configuración de navegación principal

Home Forums Support Configuración de navegación principal

Viewing 15 posts - 31 through 45 (of 51 total)
  • Author
    Posts
  • #1343125
    Pedro

    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!

    #1343596
    David
    Staff
    Customer Support

    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.

    #1347659
    Pedro

    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!

    #1348555
    Tom
    Lead Developer
    Lead Developer

    This should fix it:

    .main-navigation.has-branding .menu-toggle {
        margin-left: auto;
    }
    #1348614
    Pedro

    Hola Tom! Funcionó perfectamente.

    Una última pregumta, el siguiente CSS debería quitarlo verdad?

    #primary-menu {
        margin-left: auto;
    }

    ¡Gracias!

    #1348631
    Pedro

    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;
        }
    }
    #1348770
    Tom
    Lead Developer
    Lead Developer

    That CSS is likely still necessary.

    If there’s no WC, you can likely remove the CSS referencing wc-mobile-cart-items.

    #1348787
    Pedro

    Muchas gracias Tom!

    #1348816
    Tom
    Lead Developer
    Lead Developer

    No problem 🙂

    #1350046
    Pedro

    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!

    #1350820
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Where’s the search bar coming from in this case? A plugin or custom code?

    #1350831
    Pedro

    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>
    #1351059
    Tom
    Lead Developer
    Lead Developer

    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">

    #1354673
    Pedro

    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.

    #1354956
    David
    Staff
    Customer Support

    Try this instead:

    <input type="hidden" name="post_type" value="post">

Viewing 15 posts - 31 through 45 (of 51 total)
  • You must be logged in to reply to this topic.