Styling mobile nav bar issue

Hello. I add in mobile custom css style for blur, size and positing of buy button

.wd-sticky-btn .wd-sticky-btn-thumbnail div.quantity .wd-entities-title.stock {
    display: none;
}

.wd-toolbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 350;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 2px;
    height: 38px;
    background-color: #ffffff75;
    backdrop-filter: blur(3px);
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.12);
}

form.cart {
    display: contents;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: var(--content-align);
}

.wd-sticky-btn :is(.single_add_to_cart_button,.wd-sticky-add-to-cart) {
     width: 50%;
     border-radius: 0 !important;
}

.wd-sticky-btn :is(.single_add_to_cart_button,.wd-sticky-add-to-cart) {
     width: 50%;
     border-radius: 0 !important;
}

.sticky-toolbar-on .wd-sticky-btn {
     bottom: 38px;
}
.wd-sticky-btn-on-mb .wd-sticky-btn {
     display: flex;
}

.wd-nav-mob-tab[class*="wd-style-underline"] .nav-link-text {
    position: static;
    flex: 1 1 auto;
    padding: 10px 5px;
    text-align: center;
}

but its work only when i update page.

Next question: how to disable on mobile product thumb images? i use woodmart layouts

Attachments:

You must be logged in to view attached files.

Hello,

Before each selector add the body so in such a way you can make a selector heavier. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity

Also, make sure that you have applied the styles via Theme Settings -> Custom CSS.

2. Create a preset with such a condition – https://prnt.sc/mofUOJm_oYLn , then in its settings change the layout of the gallery – https://prnt.sc/wmtRKCbLR7Fo

Kind Regards

[Author]

Posts