How can i add custom hamburger menu

[bekircem]

Hi.

I want to create new menu like Discourse’s hamburger menu and add some links to in it. What is the best way to do this?

Thanks.

[merefield (Robert)]

Partial solution?:

Custom Header Links

This is a theme component that will allow you to add custom text-based links to the header easily. Github repository link: https://github.com/discourse/discourse-custom-header-links Demo: https://theme-creator.discourse.org/theme/Johani/custom-header-links Samples: Desktop [Capture] Mobile [Capture] (due to very limited space I don’t recommend adding more than one link on mobiles) Settings: Adding links is straightforward. Every link needs 6 items. You enter comma delimited values …

Custom hamburger menu links

This is a theme component that will allow you to easily add links the hamburger menu. Repository link https://github.com/hnb-ku/discourse-custom-hamburger-links Preview: Samples Desktop [Capture] Mobile [Capture2] Settings You add links via comma delimited values in this order: Text,URL,Location Text is the name of the link that shows on the menu. URL is the path you want the link to have. You can use relative paths like /tags/funny or /t/231 if you prefer. Location can …

[bekircem]

Yes, I have seen these options. But i need more customization. I want to add another icon beside the hamburger menu and i want to add my menu items in it.

What is the best way to do this? I want to learn this. I need some JS customizations or i must check theme files? I setup my local development environment for that. I will do the experiments on it.

But thank you so much for your ideas anyway

[bekircem]

I added another hamburger menu to Discourse on my local development environment with Google Chrome console.

<li class="header-dropdown-toggle"><a href="" data-auto-route="true" title="go to another topic list or category" aria-label="go to another topic list or category" id="toggle-hamburger-menu" class="icon btn-flat"><i class="fa fa-bars d-icon d-icon-bars" aria-hidden="true"></i></a></li>

How do I apply this code to the Discourse’s theme template? Any idea?

[merefield (Robert)]

Take a look at this Topic:

How to Add Custom Menu to Header Nav like Sitepoint

You can try looking through our repo, we use a plugin to push our theme.

[bekircem]

Thanks @merefield I’ll look into it.

[sunjam (james.network)]

This sitepoint link is dead. Any updated links or tips on custom hamburger menus?

[merefield (Robert)]

The link works for me and in any case aren’t you better off posting that in the Topic in which the link resides so that if there is an issue, the owner can address it?