Sidebar mobile

Hi,

Sorry to bother again, you just closed the other topic I created about the mobile sidebar, so I’m creating a new topic. The off-canvas sidebar on mobile is not working properly on my website.

When the sidebar is opened, the dropdowns are not working, so I am not able to select any filter from a dropdown (video: https://streamable.com/3ovvur).

Additionally, when I scroll down to select a list filter on the bottom, it scrolls back up automatically so I can also not select anything there (video: https://streamable.com/tgu48l).

I also noticed the breadcrumbs look off, with the second link not on the same height as the first one so perhaps there is an issue that effects alle these.

I didn’t change many settings (just added the custom CSS for mobile to hide the “show sidebar section” with `.basel-show-sidebar-btn {
display: none !important;
}`
and I just edited some pages. I’m not sure if this was already an issue before. Could you please check this for me as well?

Attachments:

You must be logged in to view attached files.

Hello,

To fix the dropdown and breadcrumbs issues, add the following code snippet to the Custom CSS section

.select2-container .select2-dropdown {
	z-index: 99999;
}
@media (max-width: 768px) {

	.offcanvas-sidebar-mobile .shop-content-area:not(.col-sm-12) .shop-loop-head .woocommerce-breadcrumb, .offcanvas-sidebar-mobile .shop-content-area:not(.col-sm-12) .shop-loop-head .yoast-breadcrumb {
	align-items: center;
	}
}

as for the sidebar, we don’t see this issue on your website at the moment https://monosnap.com/file/crKDfQ4nIHAnAKQXi0NBCxCBK8Omd2

Kind Regards

Thank you for providing the CSS code to fix the issue with the sidebar! The dropdowns are working and it also does not scroll back up anymore.

The breadcrumbs still look off though (picture). The second link is sitting a bit higher than the first one.

Additional question about the breadcrumbs, it is correct that they do not appear on single product pages (picture) on mobile?

Attachments:

You must be logged in to view attached files.

1. Please replace the previous custom code with the following one

.select2-container .select2-dropdown {
	z-index: 99999;
}

@media (max-width: 768px) {

	.offcanvas-sidebar-mobile .shop-content-area:not(.col-sm-12) .shop-loop-head .woocommerce-breadcrumb, 
	.offcanvas-sidebar-mobile .shop-content-area:not(.col-sm-12) .shop-loop-head .yoast-breadcrumb {
	align-items: center;
	line-height: 1;
	}
	
	.offcanvas-sidebar-mobile .shop-content-area:not(.col-sm-12) .shop-loop-head .woocommerce-breadcrumb a:first-child {
		display: flex;
		align-items: center;
	}
}

2. Yes, it is how it works in our theme. Breadcrumbs is hidden on mobile devices in our theme. If you need, we can give you a custom code to show it https://monosnap.com/file/YEDJ0ejjHO8hRpo6iR9uPdlUUHB8GT

Thank you for providing a new CSS code. Everything is working perfectly now!

I see the plugin WP-Optimize is deactivated . Was this plugin the cause of any issues?

We didn’t deactivate any plugins on your website. You can activate it now and check if it causes any issues.

[Author]

Posts