[Resolved] Configuración de navegación principal

Home Forums Support Configuración de navegación principal

Viewing 15 posts - 1 through 15 (of 51 total)
  • Author
    Posts
  • #1298313
    Pedro

    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!

    #1298591
    Tom
    Lead Developer
    Lead Developer

    Hi 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

    #1298659
    Pedro

    Hola 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!

    #1299552
    Tom
    Lead Developer
    Lead Developer

    Try 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.

    #1299635
    Pedro

    Hola 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!

    #1299636
    Pedro

    Otra 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!

    #1299909
    Tom
    Lead Developer
    Lead Developer

    This 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?

    #1300454
    Pedro

    Hola 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? 🙁

    #1301271
    Tom
    Lead Developer
    Lead Developer

    You’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;
        }
    }
    #1301290
    Pedro

    Hola 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!

    #1305545
    Pedro

    Hola! Hace casi 3 días que no recibo respuesta. ¿Pueden ayudarme por favor?

    ¡Muchas gracias!

    #1305626
    Tom
    Lead Developer
    Lead Developer

    Hi 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! 🙂

    #1305777
    Pedro

    Hola 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!

    #1306637
    Tom
    Lead Developer
    Lead Developer

    Yes, you’ll see the height in the CSS above which you can tweak.

    For the color of the icon, give the svg element a color 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.

    #1307029
    Pedro

    Wow 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!

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