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

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?

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

That’s don’t work

Attachments:

You must be logged in to view attached files.

Hello,

1. Yep, in this way – body .form.cart. Also, Paste the custom to the Custom CSS area in Theme Settings.

2. Send access to the admin panel so I can check it.

Kind Regards

Send access to the admin

[Luke Nielsen]

Hello,

2. Edit the Product layout and make it as “Inherited from Theme Settings” – https://prnt.sc/MmANmjr4XFbQ

Kind Regards

• This reply was modified 3 months, 3 weeks ago by Luke Nielsen.

When I add body to style I have very long loading time and style issue

Attachments:

You must be logged in to view attached files.

Hello,

I do not see that issue – https://prnt.sc/fwcO6eUmvcMQ

Send me a link to that page and try to clear the browser cache and recheck the issue.

Kind Regards

I reverted to previous values.

You can try to do this

Hello,

Still works well, here is a screenshot from a real mobile device – https://prnt.sc/VuCT6IjIQC7k

Kind Regards

Now I have this bug

Attachments:

You must be logged in to view attached files.

[Luke Nielsen]

Hello,

Thank you for the screenshot.

This is not a bug. That happened due to the changed height of the bottom navbar – https://prnt.sc/O7HSSZxBR--c

So to make it work right, use the code below:

body.sticky-toolbar-on .wd-sticky-btn {
    bottom: 38px;
}

Kind Regards

• This reply was modified 3 months, 3 weeks ago by Luke Nielsen.
• This reply was modified 3 months, 3 weeks ago by Luke Nielsen.

It doesn’t work as it should. on the record, the second button appears only after the page is refreshed again. Before that, the Buy button occupies the entire length of the block, it tends to occupy 50%, this is written in custom css

body 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;
}
body .wd-sticky-btn-on-mb .wd-sticky-btn {
display: flex;
}

https://quickshare.samsungcloud.com/pSWnPMMhQ2WE

video

Check pls this video where simulation of iphone and android

Hello,

I have added the body to your custom https://prnt.sc/gGlCNWmMAbIh and now it seems to work well. So clear the site/browser cache and recheck the issue.

Kind Regards

Hello! thank you, now its work perfect!)

[ya.predko]

But i have one little question 🙂 How to make the add to cart buttons under the price full width, so that the first button is where it is but full width, and the second is below it? But so that the sticky buttons on mobile remain as they are now?

• This reply was modified 3 months, 3 weeks ago by ya.predko.

Attachments:

You must be logged in to view attached files.

Hello,

Apply the code below in Theme Settings -> Custom CSS -> Mobile CSS area:

.wd-single-add-cart .single_add_to_cart_button:nth-of-type(1) {
    width: 70%;
}

.wd-single-add-cart {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

https://prnt.sc/n0Cyw3afcngi

Kind Regards

Thanks for your work!

Hello,

You are welcome! If you do not mind, can you please leave a 5 stars rating for our theme by going here: http://themeforest.net/downloads It will allow us to release more updates and provide dedicated support in the future. It would encourage our work a lot.

Have a good day!

Kind Regards

[Author]

Posts