Broken CSS on certain Elements After Updating to 8.1.1

Hello Xtemos Support,
We’re currently facing the following issues after updating to WoodMart 8.1.1 from 8.0.6
1. Broken Sticky Navigation Menu CSS – The CSS for the elements in the HTML Block is broken ie Promo banner element
2. Broken CSS for price filter widget and other filter widgets.
3. Broken mini cart CSS

Reverting back to 8.0.6 resolves the resolves some issues but the Promo banner element in the Sticky Navigation remains broken.

See attached screenshots for your reference and kindly assist and advise on these issues as soon as possible.

Best regards.

Attachments:

You must be logged in to view attached files.

Hello Xtemos support,
We still haven’t heard from your team. Is there any update on this?

Best regards.

Hello,

Mini Cart Issue: This has been resolved. The issue occurred because both Elementor’s Mini Cart and the theme’s Mini Cart were enabled simultaneously. I have disabled the “Mini Cart Template” from Elementor > Settings >Integrations (https://prnt.sc/pBA0NvvLManQ), and it is now displaying correctly.

Sticky Navigation HTML Block: The “Power & Backup Energy” HTML block is displaying correctly as created in Elementor. You can adjust the dropdown width or height via Appearance > Menu. Here’s a reference screenshot:https://ibb.co/GX69HsB

Sidebar Widget CSS Issue: First, flush the CDN from the server and temporarily disable it during development.

• Clear your site and browser cache, then check again.
• If the issue persists, try disabling cache plugins or third-party plugins to identify any conflicts.

Please follow these steps and let us know if the issue remains. We’re here to assist you further.

Best Regards,

Hello Aizaz,
Thanks for your response on this. We can confirm that the mini cart issue has been resolved. Not sure when it was enable but thanks a lot.

However, the HTML block issue still persists. We already did the styling for the height and width but we it seemed to have broken after the update. With further testing, we’ve noticed that this issue occurs when we set the option to “Load HTML dropdown with AJAX” to yes from the menu settings which wasn’t the case before the update. We have tried disabling the option and it loads as it should. See attached screenshots for your reference.

As for the Sidebar Widgets CSS issue, we tried all the recommendations prior to reaching out to your team. Issue seems to persist even when we switch devices and browsers. We’ve flushed the CDN and disabled all plugins except for the ones required by the theme.

Best regards & thanks.

Attachments:

You must be logged in to view attached files.

Hello,

Your sidebar widgets issue has been resolved. Check back on your site and check the issue.

For the HTML Block issue, please try to recreate this HTML Block from scratch and check if it helps.

Best Regards,

Hello again Aizaz,
Thanks for the update on this. We can confirm that the sidebar widgets are working just fine. Are you able to advise on how this can be replicated to our live environment or we just have to copy the theme files for deployment?

As for the HTML block, it is not the only one. We only used this one for illustration purposes. Otherwise, all HTML blocks inserted in the menu are exhibiting the same behavior when loaded using Ajax. You can check that for yourself and you’ll notice this.

If you don’t mind me asking this here, are there any server settings that we need to adjust in order to prevent the Ajax store from falling back to traditional loading and just load everything using Ajax? You can have a look at the server configuration and advise.

Best regards & thanks.

Hello,

Regarding the sidebar issue, I have installed the Classic Widgets plugin on your site and added the widget.

When you first visit your website and hover over the menu, an AJAX request is triggered to load the dropdown content from the server. However, on subsequent interactions, the content will be cached in your browser, so you won’t see the loading process again.

Best Regards,

Hi Aizaz,
Thanks for the update. We managed to implement the sidebar changes to our live environment over the weekend.

Secondly, we’re aware of how AJAX loading works on the menus. However, like we mentioned earlier, enabling AJAX load in the menu is now breaking the promo banner element which wasn’t the case before the update. Do we understand each other on this?

Thirdly, this is not related to the update but we’ve noticed that any CSS customizations done to the header doesn’t seem to stick in that it works most of the times but doesn’t work sometimes. You’ll notice that the header elements styling isn’t always consistent. We’ve tried implementing the CSS in the theme settings as well as the Customizer Additional CSS section and the outcome still remains the same. Not sure if this has anything to do with how the header is loaded by the theme. See attached screenshots for your reference and advise.

Best regards & thanks.

Attachments:

You must be logged in to view attached files.

Hello,

01. At the moment, I don’t see this problem. https://monosnap.com/file/qRdyDxTYg4OhnqFiZxNP4dsJ4f0qQp The “Load HTML dropdown with AJAX” option was enabled and when the video was first loaded, you could see how the content was loaded and inserted. Could you please check this problem, if it still exists, how can I see it?

02. Can you please tell me which custom css you are using for header customization so I will check your css code and give you a possible solution? Now the header looks like this: https://ibb.co/NDhvvbw

Best Regards,

Hello Aizaz,
Hope you’re doing great today. I’ve provided 2 video links in the private content area to illustrate these issues with hopes that we get to an understanding. You’ll get to see the banner issue and the header CSS issue from the video and screenshot. attached

Best regards.

Hello,

01. Your first video link is not working, please share the correct link so I will check further.

02. Please check the header CSS now. I have updated the custom CSS values and added them under Theme Settings > Custom CSS. Everything is working fine.

Best Regards,

Hello Aizaz,
Hope you’re doing great today. Please feel free to us ask for clarification if you don’t understand what we’re requesting. We did the customizations and want the custom CSS as it was. If we didn’t want it, we would have removed the CSS or commented it out ourselves. We don’t want the default circle-looking header elements. We want our custom styling. Even though we’ve done it, our concern is that with your theme, for whatever reason, the style is not consistent. It keeps changing from page to page or post type. Hence, we’re asking for help on this.

Secondly, I’ve reattached the link. It is working, I’ve checked it and I checked it even yesterday before sending it through.

Best regards.

We’ve tried readjusting from the Global CSS but we’re still getting the same outcome. Were you able to get custom radius on the elements on your end?

Best regards.

Hello,

To solve this problem, you needs to add the following code to the child theme functions.php file and check again,

add_filter('woodmart_enqueue_html_dropdowns_inline_style', '__return_true');

Best Regards,

Thanks for the response Aizaz. There’s no CSS in custom CSS section under the theme settings. You seem to have removed it so the outcome is still the default styling. Are you able to check on this? On the other hand, I’ve added the line of code to the theme’s functions file.

Sorry about the link. I guess it’s just the problem with the service. I’ve attached an alternate link below.

Hello,

You are seeing this problem because you have cached content, could you check in an incognito browser? We check this on our side and everything works for us https://monosnap.com/file/Co7pY8d5hq4ItLusk84Aa3hvuRX2er

For the custom css, please try Using border-radius: 5px !important; forces the styling to apply and choose the custom value.

Like this:

.wd-tools-element.wd-design-8 .wd-tools-inner {
    border-radius: 5px !important;
}

Best Regards,

[Author]

Posts