Hide sidebar on a select category

Development

AI-generated summary

A discussion on hiding the sidebar on a select category in Discourse. Hide sidebar on a select category.

Marius_Ciepluch asked how to hide the sidebar for posts in a specific category, such as “Start”. nathank provided a CSS solution that uses the category slug to target the desired category. The code is:

// hides sidebar for the specified category
body.has-sidebar-page.category-=CategorySlug= {
    #main-outlet-wrapper {
        grid-template-columns: 0 minmax(0, 1fr);
        gap: 0;
        padding-left: 10px;
     }
     .wrap {
       max-width: var(--d-max-width);
     }
}

Marius_Ciepluch confirmed the solution works and asked if it’s possible to also hide the sidebar on /tags pages. nathank suggested inspecting the page’s <body> tag to find the correct class, which is body.has-sidebar-page.tags-page. Lilly noted that this feature could be added to the Navigation Sidebar Menu Display Control component.

1

Hi,

Would someone know how I can hide the Sidebar when a posting of select categories is open?
I would show it by default, but not for posts in that category. For example, in the category “Start”.

2

I’d quite like to do that too.

This CSS should do that nicely.

Just fill in this field with your category slug and copy the code. Then drop it in the Desktop CSS of your Theme and voila!


(If you are targeting a subcategory, use a parentslug-subcatslug format)

// hides sidebar for the specified category
body.has-sidebar-page.category-=CategorySlug= {
    #main-outlet-wrapper {
        grid-template-columns: 0 minmax(0, 1fr);
        gap: 0;
        padding-left: 10px;
     }
     .wrap {
       max-width: var(--d-max-width);
     }
}

@Lilly - would this work as a feature of Navigation (sidebar) menu display control?

3

Very helpful, I have just tested it. Thank you!

Is it possible to also hide it on /tags ? body.has-sidebar-page.tags isn’t the right selector.

4

It certainly would. will add it to the component. Thank you for the suggestion and the code :slight_smile:

5

If you inspect the classes in the tag of the page you are trying to target, then you will see the class that you need to use.

In this case, body.has-sidebar-page.tags-page should sort you out.