Home › Forums › WoodMart support forum › Styling mobile nav bar issue

Styling mobile nav bar issue

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 19, 2025 at 3:05 am #646984

    ya.predko
    Participant

    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.
    March 19, 2025 at 1:53 pm #647194

    Luke Nielsen
    Keymaster

    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

    March 19, 2025 at 7:10 pm #647328

    ya.predko
    Participant

    i.e i need to add body to each class, like a

    <strong>body </strong>.wd-sticky-btn .wd-sticky-btn-thumbnail div.quantity .wd-entities-title.stock {
    display: none;
}

<strong>body </strong>.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);
}

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

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

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

<strong>body </strong>.sticky-toolbar-on .wd-sticky-btn {
     bottom: 38px;
}
<strong>body </strong>.wd-sticky-btn-on-mb .wd-sticky-btn {
     display: flex;
}

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

    can u provide modified code?

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)