0

tengo una duda de algo bien extraño que me está pasando en una página web la cual es:

Mi Outlets

Al ingresar en la página web todo funciona bien se muestra el slider y más abajo los productos, pero algo extraño pasa al momento de agregar productos al carro.

  • Si agrego 1 producto y después agrego otro producto el menú se daña de la siguiente forma:

introducir la descripción de la imagen aquí

Al agregar dos productos el menu se coloca de esa forma, pero automático solo... que podría ser? algo super extraño.

Gracias.

1
  • Te recomiendo leer Cómo preguntar, no se entiende el problema
    – user128299
    Commented el 10 sept. 2020 a las 22:16

1 respuesta 1

0

Estoy viendo que cambian muchísimo la estructura del HTML de un momento a otro.

Cuando tienes un ítem existe un div(class="header-wrap") con dos hijos "header-warp-holder" y "nav-wrap", en este caso, tiene la siguiente estructura:

<div class="header-wrap" style="background: #fff !important;">
    <div class="header-wrap-holder" style="margin-top: 20px !important; background: #fff !important;">
        <!-- Logo -->
        <div class="logo-container text-left">

            <a href="http://mioutlets.cl">
                <img class="hidden-xs" style="height: 150px !important; padding-left: 80px !important;"
                    src="http://mioutlets.cl/public/files/1598588156.png" alt="logo">

                <img class="logo hidden-md hidden-lg" style="height: 150px !important; padding-left: 80px !important;"
                    src="http://mioutlets.cl/public/files/1598588156.png" alt="logo">
            </a>

        </div>


        <!-- Search -->
        <div class="nav-search hidden-sm hidden-xs">
            <form action="http://mioutlets.cl/product/all" method="post">
                <input type="hidden" name="_token" value="vW2kK9yCh4BFkzd2bTTLjRpQJ6dbyooTRsO9dpQQ">
                <input type="search" class="form-control" placeholder="Buscar" style="width: 500px !important;">
                <button type="submit" class="search-button push-right">
                    <i class="icon icon_search"></i>
                </button>
            </form>

        </div>


        <!-- Cart -->
        <div class="nav-cart-wrap hidden-sm hidden-xs">
            <div class="nav-cart right">
                <div class="nav-cart-outer">
                    <div class="nav-cart-inner">
                        <a href="#" class="nav-cart-icon">1</a>
                    </div>
                </div>
                <div class="nav-cart-container">
                    <div class="nav-cart-items">
                        <div class="nav-cart-item clearfix">
                            <div class="nav-cart-img">
                                <a href="#">
                                    <img src="http://mioutlets.cl/public/files/2020-08-11-05-41-12-file.jpg" alt="">
                                </a>
                            </div>
                            <div class="nav-cart-title">
                                <a href="#">
                                    BANDA RESISTENCIA
                                </a>
                                <div class="nav-cart-price">
                                    <span>1 x</span>
                                    <span>$ 9990</span>
                                </div>
                            </div>
                            <div class="nav-cart-remove">
                                <a href="#"><i class="icon icon_close"></i></a>
                            </div>

                        </div> <!-- end cart items -->

                        <div class="nav-cart-summary">
                            <span>Subtotal</span>
                            <span class="total-price">$ 9990</span>
                        </div>

                        <div class="nav-cart-actions mt-20">
                            <a href="http://mioutlets.cl/cart" class="btn btn-md btn-dark"><span>Ver Carro</span></a>
                            <a href="http://mioutlets.cl/checkout" class="btn btn-md btn-color mt-10"><span>Ir a
                                    Pagar</span></a>
                        </div>
                    </div>
                </div>
                <div class="menu-cart-amount right">
                    <span>
                        Carro /
                        <a href="#"> $ 9990</a>
                    </span>
                </div>
            </div> <!-- end cart -->

        </div>
    </div> <!-- end header wrap -->

    <div class="nav-wrap" style="background: #CC384D !important;">
        <div class="collapse navbar-collapse" id="navbar-collapse">

            <ul class="nav navbar-nav">

                <li id="mobile-search" class="hidden-lg hidden-md">
                    <form action="http://mioutlets.cl/product/all" method="post" class="mobile-search relative">
                        <input type="hidden" name="_token" value="vW2kK9yCh4BFkzd2bTTLjRpQJ6dbyooTRsO9dpQQ">
                        <input type="search" class="form-control" placeholder="Buscar...">
                        <button type="submit" class="search-button">
                            <i class="icon icon_search"></i>
                        </button>
                    </form>
                </li>

                <li class="dropdown">
                    <a href="http://mioutlets.cl" style="color: #fff !important;">Inicio</a>
                </li>

                <li>
                    <a href="http://mioutlets.cl/category/Accesorios" style="color: #fff !important;">Accesorios</a>
                </li> <!-- end categories -->
                <li>
                    <a href="http://mioutlets.cl/category/Funcional" style="color: #fff !important;">Funcional</a>
                </li> <!-- end categories -->
                <li>
                    <a href="http://mioutlets.cl/category/Pesas" style="color: #fff !important;">Pesas</a>
                </li> <!-- end categories -->

                <li class="dropdown">
                    <a href="http://mioutlets.cl/contact" style="color: #fff !important;">Contáctenos</a>
                </li>

                <li class="mobile-links">
                    <ul>
                        <li><a href="http://mioutlets.cl/login">INGRESAR</a></li>
                        <li><a href="http://mioutlets.cl/register">REGISTRATE</a></li>
                    </ul>
                </li>

            </ul> <!-- end menu -->
        </div> <!-- end collapse -->
    </div> <!-- end col -->

</div>

Pero cuando añado un segundo ítem, tiene el mismo padre "header-wrap" pero con una estructura muy diferente, lo que no debería de pasar, teniendo ahora solo el hijo header-wrap-holder y dentro de él tienes a nav-wrap lo que hace que se vea de manera rara

<div class="header-wrap" style="background: #fff !important;">
    <div class="header-wrap-holder" style="margin-top: 20px !important; background: #fff !important;">
        <!-- Logo -->
        <div class="logo-container text-left">

            <a href="http://mioutlets.cl">
                <img class="hidden-xs" style="height: 150px !important; padding-left: 80px !important;"
                    src="http://mioutlets.cl/public/files/1598588156.png" alt="logo">

                <img class="logo hidden-md hidden-lg" style="height: 150px !important; padding-left: 80px !important;"
                    src="http://mioutlets.cl/public/files/1598588156.png" alt="logo">
            </a>

        </div>


        <!-- Search -->
        <div class="nav-search hidden-sm hidden-xs">
            <form action="http://mioutlets.cl/product/all" method="post">
                <input type="hidden" name="_token" value="vW2kK9yCh4BFkzd2bTTLjRpQJ6dbyooTRsO9dpQQ">
                <input type="search" class="form-control" placeholder="Buscar" style="width: 500px !important;">
                <button type="submit" class="search-button push-right">
                    <i class="icon icon_search"></i>
                </button>
            </form>

        </div>


        <!-- Cart -->
        <div class="nav-cart-wrap hidden-sm hidden-xs">
            <div class="nav-cart right">
                <div class="nav-cart-outer">
                    <div class="nav-cart-inner">
                        <a href="#" class="nav-cart-icon">2</a>
                    </div>
                </div>
                <div class="nav-cart-container">
                    <div class="nav-cart-items">
                        <div class="nav-cart-item clearfix">
                            <div class="nav-cart-img">
                                <a href="#">
                                    <img src="http://mioutlets.cl/public/files/2020-08-11-05-41-12-file.jpg" alt="">
                                </a>
                            </div>
                            <div class="nav-cart-title">
                                <a href="#">
                                    BANDA RESISTENCIA
                                </a>
                                <div class="nav-cart-price">
                                    <span>1 x</span>
                                    <span>$ 9990</span>
                                </div>
                            </div>
                            <div class="nav-cart-remove">
                                <a href="#"><i class="icon icon_close"></i></a>
                            </div>
                            <div class="nav-cart-item clearfix">
                                <div class="nav-cart-img">
                                    <a href="#">
                                        <img src="http://mioutlets.cl/public/files/2020-08-11-11-23-31-file.jpg" alt="">
                                    </a>
                                </div>
                                <div class="nav-cart-title">
                                    <a href="#">
                                        PELOTA YOGA 65 CM
                                    </a>
                                    <div class="nav-cart-price">
                                        <span>1 x</span>
                                        <span>$ 7990</span>
                                    </div>
                                </div>
                                <div class="nav-cart-remove">
                                    <a href="#"><i class="icon icon_close"></i></a>
                                </div>

                            </div> <!-- end cart items -->

                            <div class="nav-cart-summary">
                                <span>Subtotal</span>
                                <span class="total-price">$ 17980</span>
                            </div>

                            <div class="nav-cart-actions mt-20">
                                <a href="http://mioutlets.cl/cart" class="btn btn-md btn-dark"><span>Ver
                                        Carro</span></a>
                                <a href="http://mioutlets.cl/checkout" class="btn btn-md btn-color mt-10"><span>Ir a
                                        Pagar</span></a>
                            </div>
                        </div>
                    </div>
                    <div class="menu-cart-amount right">
                        <span>
                            Carro /
                            <a href="#"> $ 17980</a>
                        </span>
                    </div>
                </div> <!-- end cart -->

            </div>
        </div> <!-- end header wrap -->

        <div class="nav-wrap" style="background: #CC384D !important;">
            <div class="collapse navbar-collapse" id="navbar-collapse">

                <ul class="nav navbar-nav">

                    <li id="mobile-search" class="hidden-lg hidden-md">
                        <form action="http://mioutlets.cl/product/all" method="post" class="mobile-search relative">
                            <input type="hidden" name="_token" value="vW2kK9yCh4BFkzd2bTTLjRpQJ6dbyooTRsO9dpQQ">
                            <input type="search" class="form-control" placeholder="Buscar...">
                            <button type="submit" class="search-button">
                                <i class="icon icon_search"></i>
                            </button>
                        </form>
                    </li>

                    <li class="dropdown">
                        <a href="http://mioutlets.cl" style="color: #fff !important;">Inicio</a>
                    </li>

                    <li>
                        <a href="http://mioutlets.cl/category/Accesorios" style="color: #fff !important;">Accesorios</a>
                    </li> <!-- end categories -->
                    <li>
                        <a href="http://mioutlets.cl/category/Funcional" style="color: #fff !important;">Funcional</a>
                    </li> <!-- end categories -->
                    <li>
                        <a href="http://mioutlets.cl/category/Pesas" style="color: #fff !important;">Pesas</a>
                    </li> <!-- end categories -->

                    <li class="dropdown">
                        <a href="http://mioutlets.cl/contact" style="color: #fff !important;">Contáctenos</a>
                    </li>

                    <li class="mobile-links">
                        <ul>
                            <li><a href="http://mioutlets.cl/login">INGRESAR</a></li>
                            <li><a href="http://mioutlets.cl/register">REGISTRATE</a></li>
                        </ul>
                    </li>

                </ul> <!-- end menu -->
            </div> <!-- end collapse -->
        </div> <!-- end col -->

    </div> <!-- end row -->
</div>

Entonces, la solución fue mover el nav-wrap que estaba dentro de header-wrap-holder y hacerlo su elemento hermano.

<div class="header-wrap" style="background: #fff !important;">
    <div class="header-wrap-holder" style="margin-top: 20px !important; background: #fff !important;">
        <!-- Logo -->
        <div class="logo-container text-left">

            <a href="http://mioutlets.cl">
                <img class="hidden-xs" style="height: 150px !important; padding-left: 80px !important;"
                    src="http://mioutlets.cl/public/files/1598588156.png" alt="logo">

                <img class="logo hidden-md hidden-lg" style="height: 150px !important; padding-left: 80px !important;"
                    src="http://mioutlets.cl/public/files/1598588156.png" alt="logo">
            </a>

        </div>


        <!-- Search -->
        <div class="nav-search hidden-sm hidden-xs">
            <form action="http://mioutlets.cl/product/all" method="post">
                <input type="hidden" name="_token" value="vW2kK9yCh4BFkzd2bTTLjRpQJ6dbyooTRsO9dpQQ">
                <input type="search" class="form-control" placeholder="Buscar" style="width: 500px !important;">
                <button type="submit" class="search-button push-right">
                    <i class="icon icon_search"></i>
                </button>
            </form>

        </div>


        <!-- Cart -->
        <div class="nav-cart-wrap hidden-sm hidden-xs">
            <div class="nav-cart right">
                <div class="nav-cart-outer">
                    <div class="nav-cart-inner">
                        <a href="#" class="nav-cart-icon">2</a>
                    </div>
                </div>
                <div class="nav-cart-container">
                    <div class="nav-cart-items">
                        <div class="nav-cart-item clearfix">
                            <div class="nav-cart-img">
                                <a href="#">
                                    <img src="http://mioutlets.cl/public/files/2020-08-11-05-41-12-file.jpg" alt="">
                                </a>
                            </div>
                            <div class="nav-cart-title">
                                <a href="#">
                                    BANDA RESISTENCIA
                                </a>
                                <div class="nav-cart-price">
                                    <span>1 x</span>
                                    <span>$ 9990</span>
                                </div>
                            </div>
                            <div class="nav-cart-remove">
                                <a href="#"><i class="icon icon_close"></i></a>
                            </div>
                            <div class="nav-cart-item clearfix">
                                <div class="nav-cart-img">
                                    <a href="#">
                                        <img src="http://mioutlets.cl/public/files/2020-08-11-11-23-31-file.jpg" alt="">
                                    </a>
                                </div>
                                <div class="nav-cart-title">
                                    <a href="#">
                                        PELOTA YOGA 65 CM
                                    </a>
                                    <div class="nav-cart-price">
                                        <span>1 x</span>
                                        <span>$ 7990</span>
                                    </div>
                                </div>
                                <div class="nav-cart-remove">
                                    <a href="#"><i class="icon icon_close"></i></a>
                                </div>

                            </div> <!-- end cart items -->

                            <div class="nav-cart-summary">
                                <span>Subtotal</span>
                                <span class="total-price">$ 17980</span>
                            </div>

                            <div class="nav-cart-actions mt-20">
                                <a href="http://mioutlets.cl/cart" class="btn btn-md btn-dark"><span>Ver
                                        Carro</span></a>
                                <a href="http://mioutlets.cl/checkout" class="btn btn-md btn-color mt-10"><span>Ir a
                                        Pagar</span></a>
                            </div>
                        </div>
                    </div>
                    <div class="menu-cart-amount right">
                        <span>
                            Carro /
                            <a href="#"> $ 17980</a>
                        </span>
                    </div>
                </div> <!-- end cart -->

            </div>
        </div> <!-- end header wrap -->

        <!-- end col -->

    </div>
    <div class="nav-wrap" style="background: #CC384D !important;">
        <div class="collapse navbar-collapse" id="navbar-collapse">

            <ul class="nav navbar-nav">

                <li id="mobile-search" class="hidden-lg hidden-md">
                    <form action="http://mioutlets.cl/product/all" method="post" class="mobile-search relative">
                        <input type="hidden" name="_token" value="vW2kK9yCh4BFkzd2bTTLjRpQJ6dbyooTRsO9dpQQ">
                        <input type="search" class="form-control" placeholder="Buscar...">
                        <button type="submit" class="search-button">
                            <i class="icon icon_search"></i>
                        </button>
                    </form>
                </li>

                <li class="dropdown">
                    <a href="http://mioutlets.cl" style="color: #fff !important;">Inicio</a>
                </li>

                <li>
                    <a href="http://mioutlets.cl/category/Accesorios" style="color: #fff !important;">Accesorios</a>
                </li> <!-- end categories -->
                <li>
                    <a href="http://mioutlets.cl/category/Funcional" style="color: #fff !important;">Funcional</a>
                </li> <!-- end categories -->
                <li>
                    <a href="http://mioutlets.cl/category/Pesas" style="color: #fff !important;">Pesas</a>
                </li> <!-- end categories -->

                <li class="dropdown">
                    <a href="http://mioutlets.cl/contact" style="color: #fff !important;">Contáctenos</a>
                </li>

                <li class="mobile-links">
                    <ul>
                        <li><a href="http://mioutlets.cl/login">INGRESAR</a></li>
                        <li><a href="http://mioutlets.cl/register">REGISTRATE</a></li>
                    </ul>
                </li>

            </ul> <!-- end menu -->
        </div> <!-- end collapse -->
    </div><!-- end row -->
</div>

De esa manera, aunque tengas más elementos en el carrito ya se visualiza bien:

introducir la descripción de la imagen aquí

1
  • amigo me salvastes!!!!!!!!!!!!!!! Muchisimas gracias!!!! @Noob Dev
    – Emkrypted
    Commented el 11 sept. 2020 a las 0:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.