[Support request] Personlización barra de búsqueda

Home Forums Support Personlización barra de búsqueda

  • This topic has 1 reply, 2 voices, and was last updated 3 months ago by Tom.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1343758
    Pedro

    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!

    #1344022
    Tom
    Lead Developer
    Lead Developer

    Hi 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;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.