How to replace Discourse <header> with my own?

I want to have a Discourse forum as one section of a website. However I want to show my website’s header & navigation (including menu & user menu) instead of the Discourse one. This is so that the look and feel is unified across the whole site.

Is there already a solution for this?

Otherwise what’s the recommended approach? Theme with CSS to hide <header> and put my own stuff in header.html? Feels dirty.

You can use the already available #theme-component for the purposes of adding additional header and make css changes to do the color/style matching.

I’d recommend that you don’t remove or hide the existing discourse header as it will cause a lot of problems.

I already have my own user menu (avatar etc.) for my site and I’m using SSO for Discourse so they share the same user data. It would be terrible UX for a page to have two user menus and if I simply omit mine for the forum section then again there would be terrible UX because they would be different.

Is it not possible for me to replace the Discourse hamburger menu and user menu with my own that incorporate Discourse links (e.g. categories, inbox)?

Discourse hamburger menu and user menu both contain important links.

If You just want your users to never be able to access the following:
Account settings
Profile Preferences
Notifications
Messages
And more to be inaccessible then You can hide the discourse menu via css.

There are several. I think that a couple are available if you try to add a theme, but you can look here:

https://meta.discourse.org/search?context=topic&context_id=132740&q=%23theme%20header&skip_context=true

1 Like

Thanks Jay. I’ll check that out.

It’s not impossible… you could hide our default header with CSS and add yours in a theme (note you’d have to duplicate your nav, you can’t directly pull in your website’s code)… but you’d either be throwing out a lot of the default functionality, or recreating it. Notifications are a big one.

We’ve found that it’s better in the long-run to add content (using the theme api) and style the Discourse header to match an existing website as closely as possible, rather than try to replace the whole header from scratch.

5 Likes