Is there a simple way to remove all the category info / text from top of page?

Product Support

AI-generated summary

In a support thread titled ‘Is there a simple way to remove all the category info / text from top of page?’, BCHK asks how to remove category-related UI elements from the top of their Discourse forum for a cleaner look, noting they’re not comfortable editing CSS. Zup responds with CSS code to hide the breadcrumb and navigation bar, and even provides a downloadable theme component (discourse-hide-nav.zip) with step-by-step installation instructions. Steven offers a refined version of the CSS that also preserves right-alignment of the ‘New topic’ button by adjusting the flex-direction of the navigation container. BCHK thanks them for the detailed and helpful instructions, confirming the solution met their needs.

1

Is there a way to easily remove all this text at the top of the forum? I’m not a coder, am not good at editing css, etc. - but I’m working on a simple forum with one main category - want a cleaner UI - and would like to remove all the category boxes, etc. as is displayed here:

Screen Shot 2021-10-17 at 1.39.09 PM
Screen Shot 2021-10-17 at 1.39.09 PM1352×282 29.8 KB

2

Shouldn’t be displayed if you add the following to the common CSS of a theme component:

ol.category-breadcrumb {
    display: none;
}
#navigation-bar {
    display: none;
}

I created a simple little TC for you that you could install locally to do it for you:

discourse-hide-nav.zip (1016 Bytes)

Go to your Discourse admin panel > Customize > Themes > Components > Install > From your device
Choose discourse-hide-nav.zip then click Install
In the Hide Nav TC editor click ‘Add all themes’ then click the green check circle

edit: Steven’s reply below is preferable imo

3

Zup was faster than me. This is the same idea basically, but if you want to keep the New topic button align to the right, I’d put these:

.list-controls {
    ol.category-breadcrumb, ul#navigation-bar {
        display: none;
    }
    .navigation-container {
        flex-direction: row-reverse;
    }
}
4

Fantastic - thanks so much for the detailed instructions! Just what I needed!