[5] Shoptet úpravy - Oprava animace otevírání menu na mobilu

V této sérii článků sdílím užitečné tipy, návody a zkušenosti, jak lze rychle a jednoduše vylepšit váš eshop.

Celé roky mě irituje, jakým způsobem se na všech výchozích šablonách shoptetu při animaci vysouvání mobilního menu deformují jednotlivé položky. Tady je jednoduchý fix.

Následující css vložte do hlavičky vašeho eshopu

@media (max-width: 767px){
    #navigation {
        transform: translateX(100%);
        max-width: 100%;
        width: 300px;
    }
    .navigation-in>ul>li{
        flex-shrink: 0;
    }
    .navigation-window-visible #navigation {
        transform: translateX(0%);
        max-width: 100%;
        width: 300px;
    }
}