Search code examples
csswordpresscoding-stylesidebar

Sidebar broken on wordpress site

On my shop page the sidebar is working fine but on the wcfm marketplace store page the sidebar is covering the page. its the mobile view.

the shop page is here https://melaninmart.com/shop/

the store page is here https://melaninmart.com/store/lustablesz-cosmetics/

Thanks in advance

Solution

  • The problem is in your CSS, specifically these 3 attributes:

    @media (max-width: 991px)
.sidebar {
    top: 0;
    max-width: 80%;
    position: fixed;
}

    Position:fixed and top:0 means your sidebar is forced to stick to the top of the page element, where on a mobile-view, you want the sidebar to stack above or below the content.

    Changing this code to the following fixes the issue:

    @media (max-width: 991px)
.sidebar {
    top: auto;
    max-width: 100%;
    position: relative;
}