on mobile sidebar is displayed on bottom of page

  • Resolved ulike

    (@ulike)


    2 years, 5 months ago

    Hello

    I am using kadence theme while building my ecommerce website using woocommerce.

    I have a sidebar with product filters.
    On mobile, the sidebar is displayed at the bottom of the page.
    I want to display it on top of page, above my products.
    Also is it possible to make it a collapsible sidebar just for mobile ?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • @ulike A couple of lines of css will move the sidebar to the top on mobile, however, you would need to implement some javascript to make it collapsible.

    @media screen and (max-width: 1025px){
.has-left-sidebar #main {
    grid-column: 1;
    grid-row: 2;
}
.has-left-sidebar #secondary {
    grid-column: 1;
    grid-row: 1;
}
}
    Thread Starter ulike

    (@ulike)

    hey thanks for the reply @wlpdrpat

    where can i add this code ?

    @ulike From wp-admin navigate to Appearance > Customize and then choose the menu item Additional CSS. Be sure to save changes and publish.

    Thread Starter ulike

    (@ulike)

    @wlpdrpat its not working

    @ulike Sorry, I missed this line of css. Place it above the previous css.

    .content-container.site-container {display: grid;}

    • This reply was modified 2 years, 5 months ago by wlpdrpat.
    Thread Starter ulike

    (@ulike)

    @wlpdrpat OMG! it worked, I don’t have words to express how grateful I am to you.

    I really appreciate you sparing your time to resolve my issue so quickly. Thank you very much.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘on mobile sidebar is displayed on bottom of page’ is closed to new replies.

Tags