GeneratePress Sidebars: CSS and Code Snippets

---

Sticky Sidebar on Custom Post Types

If you are looking for the CSS necessary to make the right sidebar sticky on a certain custom post type, this is the CSS snippet you need

@media(min-width: 769px) { 
.your_post_type .inside-right-sidebar {
    position: sticky;
    top: 0;
}
  }

Source: GeneratePress

GeneratePress: Disable Sidebar on Tablets

Sidebars look great on desktop computers but they don’t look that great on tablets.

On mobile devices, the left or right sidebar is placed after the content of the post.

This CSS code will remove the right sidebar from devices with a maximum width of 1099px.

Use Viewport sizer to understand the width of different types of devices.

@media (max-width: 1099px) {
    div#right-sidebar {
        display: none;
    }
    .site-content .content-area {
        width: 100%;
    }
    .single-post.separate-containers .site-main {
        margin-right: 0px;
    }
}

GeneratePress: Place Sidebar after the Content on Tablet

In case you want to move the right sidebar after the content just like what you see on mobile devices, you can use this snippet of code instead

@media(max-width: 1024px) {
    .site-content {
        flex-direction: column;
    }
    #primary,
    #right-sidebar {
        width: 100%;
    }
    site-main .site-main  {
        margin-right: 0
    }
}

GeneratePress: PHP Snippet to Adjust the Sidebar

If you need to adjust the width of the right sidebar, you can add this PHP snippet to your Functions.PHP file.

//Adjust the sidebar
add_filter( 'generate_right_sidebar_width','tu_custom_right_sidebar_width' );
function tu_custom_right_sidebar_width( $width ) {
if ( is_single() ) {
return 30;
}
return $width;
}