Home › Forums › Basel support forum › Sidebar mobile

Sidebar mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 12, 2024 at 5:00 pm #589719

    farithcia.verveer
    Participant

    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.
    August 13, 2024 at 10:31 am #589832

    Artem Temos
    Keymaster

    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

    August 13, 2024 at 11:39 am #589852

    farithcia.verveer
    Participant

    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.
    August 13, 2024 at 2:19 pm #589892

    Artem Temos
    Keymaster

    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

    August 13, 2024 at 4:03 pm #589930

    farithcia.verveer
    Participant

    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?

    August 14, 2024 at 9:08 am #590004

    Artem Temos
    Keymaster

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

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