Add a global header between Discourse & Website

We’d like to have a modern and responsive header that is accessible on our Discourse site and our Wordpress site. My question could be respective to any other platform out there (for the main website) I just happen to be using Wordpress.

We’ve accomplished this, so far, with a very rudimentary navbar. It is mobile responsive, and when a mobile device is used, the text titles are removed, to only show the button icons.

Website - Pickleballist

Website: Mobile

image

Discourse - Pickleballist Community

Discourse: Mobile

image


I wrote all the HTML and CSS for the global header, and it’s very rudimentary.

As our site and our offerings expand, it would be nice to have a more robust global navigation menu. But I want it to work the way it currently does so I can install the same header menu to both my Discourse site and Wordpress site.

I found a CSS responsive menu called “Monaka” that I think would be great for our needs but it’s a bit too complex for me… I’m not sure what to do to implement/install it.

Any insights here?

For reference, there are some similar topics about global navigation menus, etc. but I couldn’t find a specific solution for our needs.

  1. How can i add custom hamburger menu
  2. Custom Header Links
  3. Custom hamburger menu links