Sidebar Position on Mobile/Tablet

  • Hi,
    Currently the Sidebar which I use for listing product categories sits below the page content in mobile/tablet view, I dont feel this is a good position for it.

    I’d like to move it above the content for mobile/tablet view but keep it to the left of the content in desktop view.

    Could I use a hook like storefront_before_content, but how would I apply that function only for mobile/tablet view i.e) max-width: 768px;?

    Any help much appreciated.

    Thanks.

Viewing 5 replies - 16 through 20 (of 20 total)

  • I just want that sidebar with product filters will be in front of products in mobile view. And there would be no sidebar at homepage. I really feeling frustrating with this…

    Can you please be so kind and help me? I would be very greatful!

    OK. 

    add_action( 'init', 'jk_move_sidebar' );
function jk_move_sidebar() {
// Remove sidebar on homepage
if ( is_home() || is_front_page() ) {
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
} else {
// Move sidebar on other pages
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
add_action( 'storefront_content_top',        'storefront_get_sidebar',          10 );
}
}

    That will move your sidebar and remove it on the homepage. You might need some CSS to tweak the layout though.

    It worked on every page. But there are still sidebar in homepage just after menu…

    That’s the header widget region. Did you add any widgets there? Just remove them if you don’t want them to display.

    If you want to hide them specifically on mobile you’ll need to use some css to hide them.

Viewing 5 replies - 16 through 20 (of 20 total)
  • The topic ‘Sidebar Position on Mobile/Tablet’ is closed to new replies.